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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实 施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 


飞鱼 科技 国际 有 限 公 司 客户 端 程序 员 ， 
触 控 科 技 认 证 CVP，Cocos2d-JS 方 向 
的 权威 导师 。 从 毕业 到 现在 , 一 直 从 事 
Cocos2d-x 和 Cocos2d-JS 游 戏 开发 ， 
先后 在 Cocos 引 擎 中 文官 网 和 全 球 最 大 
苹果 开发 者 社区 CocoaChina 发 表 多 篇 


博文 以 及 两 套 Cocos2d-JS 视 频 教 程 。 
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本 书 结合 


一 部 分 为 基础 篇 ， 主 要 介绍 


核心 框架 、 
粒子 系统 、UI 控件 、 


性 


Chipmunk 物理 引擎 、 网 络 编程 


本 书 适 合 丰 


《保卫 萝卜 2》 以 及 多 个 实例 详细 
了 Cocos 引擎 家 族 史 、 各 平台 下 的 环境 搭建 、 
屏幕 适 配 等 ; 第 二 部 分 为 进 阶 篇 ， 内 容 包 括 数据 存储 、 
第 三 部 分 为 高 级 篇 ， 主 要 涉及 与 其 他 语言 的 反射 调用 、 


动作 模块 、 事 件 机 制 、 音 频 处 理 以 及 
能 优化 以 及 游戏 地 图 ; 
及 JavaScript 


也 


中 国 版 本 图 书馆 CIP 数 据 核 字 (2016) 第 083126 号 


容 提 要 


介绍 了 Cocos2d-JS 游戏 引擎， 书 中 共 分 为 4 个 部 分 ， 第 


发 工具 的 选 | 


]， 还 有 引擎 的 


Binding ; 第 四 部 分 为 实战 篇 ， 即 《保卫 葛 卜 2》 实 战 。 


一 定 JavaScript 语法 基础 ， 并 且 想 快速 系统 学 习 Cocos2d-JS 游戏 
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发 的 人 员 阅 读 。 


但 愿 自己 成 长 的 速度 
能 够 赶 上 父母 老 去 的 步伐 


说 以 此 书 ， 献 给 我 伟大 的 爸爸 妈妈 
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飞鱼 科技 发 布 的 多 款 游戏 使 用 的 都 是 Cocos 引擎 团队 的 产品 ,旗下 产品 包括 《神仙 道 》 手 游 
版 《保卫 葛 卜 》 系 列 《 三 国之 克 》《 回 西游 尖 小 鱼 飞 改 》 等 。 之 所 以 选择 Cocos 引擎， 是 因为 
它 具 有 优秀 的 跨 平台 能 力 , 具有 易于 使 用 及 高 效 、 灵 活 的 特性 ， 让 我 们 的 研发 团队 可 以 把 更 多 精 
力 放 在 游戏 设计 本 身上 ， 大 大 提高 了 开发 效率 ， 降 低 了 研发 成 本 。 

作为 忙碌 的 游戏 开发 者 中 的 一 员 , 建 风 在 工作 之 余 完成 了 这 本 书 。 书 中 结合 项 目 开发 中 的 实 
践 经 验 ， 以 读者 的 视角 精心 准备 ,通俗 易 懂 ,力求 最 住 的 阅读 和 学 习 体 验 ， 让 更 多 的 开发 者 从 实 
战 角度 出 发 ， 更 加 全 面 地 了 解 Cocos2d-JS 引擎 的 特性 。 在 建 风 提 到 撰写 这 本 书 时 ， 飞 鱼 科技 在 
第 一 时 间 给 予 了 支持 , 将 《保卫 葛 下 》 的 相关 美术 素材 授权 给 他 在 书 中 使 用 。 我 们 希望 能 通过 大 
家 熟悉 的 产品 ， 使 读者 更 加 直观 和 生动 地 学 习 Cocos2d-JS 引擎 。 


创作 本 书 历时 近 一 年 ,内 容 和 编排 诚意 十 足 ， 由浅 入 深 的 实例 教程 降低 了 学 习 门 槛 ,值得 分 
享 给 想 要 学 习 和 了 解 Cocos2d-JS 引擎 的 开发 者 。 


序 = 


几 年 来 ， 在 Cocos 引擎 团队 的 坚持 和 专注 下 ，Cocos 引擎 经 历 了 一 次 次 突破 ， 越 来 越 得 到 市 
场 的 认可 和 无 数 开发 者 的 支持 。 在 国内 i0S、Android 、 微 信 游 戏 等 分 发 渠道 上 , 近 半 数 的 游戏 产 
品 均 选择 使 用 Cocos 引擎 开发 ,同时 也 涌现 了 大 量 如 《 刀 塔 传奇 梦幻 西游 《怪物 弹 珠 》 等 月 
流水 过 亿 的 产品 ， 这 是 让 我 们 很 自豪 的 一 件 事 。 

Cocos2d-JS 是 Cocos 引擎 的 分 支 版 本 ， 同 样 有 非常 亮 腿 的 成 绩 ， 比 如 口碑 收入 双 丰 收 的 《三 
国 杀 传奇 《航海 王 启 航 》， 其 至 是 近年 越 来 越 受 到 关注 的 独立 游戏 领域 , 也 诞生 了 诸如 《 银 治 屋 
英雄 谭 》《 超 级 幻影 猫 》 等 众多 得 到 了 苹果 青睐 的 产品 。 

易 用 、 低 门槛 、 跨 全 平台 、 热 更 新 支持 ……Cocos2d-JS 的 诸多 优点 考 良 置疑 ， 加 之 Cocos 团 
队 新 推出 的 创新 性 开发 工具 Cocos Creator， 脚 本 化 已 经 是 一 种 趋势 ，Cocos2d-JS 将 在 这 方面 为 开 
发 者 提供 更 有 力 的 帮助 和 支持 。 

建 风 是 我 见 过 的 对 Cocos 引擎 有 着 非常 深入 了 解 的 90 后 开发 者 之 一 。 在 本 书 中 ， 从 最 基本 
的 模块 介绍 到 每 个 方法 的 详细 调用 ， 他 融合 了 自己 对 Cocos2d-JS 的 理解 ， 对 这 款 引 擎 进行 了 非 
常 全 面 的 剖析 和 阐释 ， 深 入 浅 出 ， 有 着 巨大 的 参考 价值 。 他 还 获得 了 飞鱼 科技 《保卫 葛 卜 》 系 列 
素材 的 授权 ,并 在 书 中 有 所 展示 。 本 书 结合 《保卫 葛 下 2》 的 实战 项 目 ， 对 Cocos2d-JS 的 具体 使 
用 进行 升华 ， 推 荐 一 读 。 

原 计 划 半 年 写 完 本 书 , 但 建 风 追求 精益 求 精 、 精 雕 细 磨 的 态度 让 这 个 时 间 延 长 到 了 10 个 月 。 
希望 这 本 书 能 帮助 更 多 的 开发 者 更 好 地 理解 Cocos2d-JS 这 款 功 能 强大 的 引擎 , 也 希望 它 能 在 带 来 
大 量 干货 的 同时 帮助 更 多 开发 者 产 出 更 优质 的 产品 。 


序 ”三 


早 在 2012 年 ,Cocos 引擎 团队 在 Google 的 赞助 下 成 功 将 Cocos2d-x 移 植 到 了 Cocos2d-HTML5 
版 本 ,成 为 全 球 最 早 的 HTML5 游戏 引擎 之 一 。2014 年 年 初 , 引擎 团队 推出 了 Cocos2d-JS， 实 现 
了 Cocos2d-HTMLS 和 Cocos2d-x JSB 引擎 框架 的 彻底 融合 ， 统 一 了 手机 页 游 和 原生 游戏 的 开发 
工作 流 ， 提 供 了 优秀 的 跨 平台 部 署 能 

目前 ， 引 警 团 队 基 于 Cocos2d-JS 推出 了 创新 性 开发 工具 Cocos Creator。 该 编辑 器 具备 彻底 
脚本 化 、 组 件 化 和 数据 驱动 的 特点 ,并 以 内 容 生产 为 核心 , 适合 团队 不 同 角 色 进 行 高 效 的 合作 以 
及 开发 。 

从 引擎 功能 增强 、 性 能 优化 ， 再 到 工具 链 的 强化 和 升级 ，Cocos2d-JS 一 直 以 来 都 致力 于 为 行 
业 和 开发 者 铺 平 道路 。 

本 书 对 Cocos2d-JS 引 敬 进行 了 很 全 面 的 剖析 和 讲解 ， 从 模块 、 框 架 的 拆 解 到 各 类 方法 的 详细 
调用 和 开发 中 的 各 种 优化 技巧 ， 内 容 由 浅 入 深 , 具有 很 好 的 指导 和 参考 作用 。 同 时 ， 建 风 获 得 了 
飞鱼 科技 《保卫 萝卜 》 系 列 素材 的 授权 ,并 在 书 中 对 这 款 很 早 便 非 常 流行 的 休闲 领域 标杆 产品 进 
行 了 全 方位 的 解析 。 同 时 ， 书 中 也 通过 介绍 《保卫 萝卜 2》 各 个 模块 的 开发 来 进行 Cocos2d-JS 实 
战 引 导 ， 具 有 非常 大 的 实际 参考 价值 ， 值 得 一 阅 。 

正如 建 风 所 说 , 本 书 其 实 更 像 一 款 “ 十 月 怀胎 ”诞生 的 产品 , 书 中 所 有 内 容 都 进行 了 精 雕 细 磨 ， 
我 相信 它 能 为 更 多 的 开发 者 带 来 巨大 的 实用 价值 ， 让 Cocos2d-JS 成 为 开发 者 手中 的 开发 利器 。 
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近 几 年 , 手 游行 业 的 发 展 可 谓 是 百 家 齐 放 、 万 紫 千 红 。 短 短 两 年 , 便 出 现 了 多 款 月 流水 过 亿 ， 
甚至 是 近 十 亿 的 产品 , 例如 《 刀 塔 传奇 《梦幻 西游 《怪物 弹 珠 》 等 , 而 这 些 游 戏 都 是 采用 Cocos 
引擎 开 发 的 。 

Cocos2d-JS 作为 Cocos 引擎 的 下 一 个 分 支 ,从 2014 年 3 月份 发 布 3.0 Beta 版 到 现在 已 经 经 历 
两 年 的 磨 练 了 。 这 两 年 来 ，Cocos2d-JS 取得 的 成 绩 不 容 置疑 。 再 加 上 Cocos Creator 编辑 器 的 推 
出 ，Cocos 引擎 面向 开发 者 脚本 化 已 经 成 为 趋势 ， 而 Cocos2d-JS 正 是 官方 现在 主推 的 方案 

本 书 编写 始 于 2015 年 4 月 ， 原 计划 6 个 月 撰写 完成 , 但 直到 2016 年 1 月 才 最 终 完 二 历经 
10 个 月 。 我 常 篆 调侃 自己 ， 这 本 书 是 我 “十 月 怀胎 ”生出 来 的 。 在 这 10 个 月 中 ， 我 过 着 机 器 般 
的 生活 ， 除 了 上 班 就 是 写 书 ， 偶 尔 有 朋友 约 我 周末 一 起 出 去 玩 ， 我 只 能 问 他 们 一 句 :“ 周 末 是 什 
么 , 能 吃 吗 ? 哪里 有 卖 ? 多 少 钱 一 斤 ? ”这 样 装 疯 卖 傻 ， 只 是 为 了 写 出 一 本 对 得 起 自己 、 对 得 起 
读者 的 书 。 

在 保证 图 书 内 容 的 同时 ,我 更 注重 它 阅读 起 来 是 否 轻 松 愉 快 、 通 俗 易 懂 、 能 够 现 学 现 用 ， 所 
以 ,我 对 书 中 所 有 的 内 容 都 进行 了 精 雕 细 磨 ， 哪 怕 它 只 是 一 张 图 片 、 一 行 注释 或 者 一 小 段 代 码 ， 
都 精益 求 精 。 对 我 来 说 ,这 本 书 更 像 是 一 个 产品 , 我 尽 可 能 地 站 在 用 户 的 角度 去 撰写 和 设计 这 本 
书 ， 由 庄 地 希望 这 本 书 能 给 广大 开发 者 带 来 帮助 ， 如 此 ， 我 便 心 满意 足 了 。 


本 书 结构 


本 书 共 4 部 分 ，17 童 。 

一 部 分 为 基础 篇 ， 共 7 章 ， 各 章 简 述 如 下 。 

名 1 章 “Cocos2d-JS 介绍 ”: 这 一 章 介 绍 了 Cocos 引擎 的 家 族 史 以 及 引擎 的 相关 创始 人 ， 说 
明了 Cocos2d-x 和 Cocos2d-JS 之 间 的 关系 ， 详 细 介 绍 了 Cocos2d-x 引擎 包 的 目录 结构 。 

第 2 章 “Hello World”: 这 一 章 介绍 了 Cocos2d-JS 项 目的 目录 结构 ， 演 示 讲述 
了 如 何 通过 Cocos Console 创建 、 编 译 、 运 行 和 打包 Cocos2d-JS 工程 。 此 外 ， 还 介绍 了 如 何 使 用 
Cocos DevTools 工具 提 站 二 习 效 率 。 在 这 一 章 中 ， 你 还 可 以 了 解 到 Cocos2d-JS 人 动 流 程 。 
第 3 章 “ 核 心 框架 ”: 这 一 章 介 绍 了 Cocos2d-JS 核心 框架 相关 的 类 ， 如 cc .Director、 
cc.Node、cc.Scene、cc.Layer、cc.Sprite、cc.Label 等 , 还 讲解 了 BMFont 编辑 器 的 用 
法 。 最 后 ， 我 们 开发 了 《保卫 更 卜 2》 的 主页 面 。 
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第 4 章 “ 动 作 模 块 ": 这 一 章 介绍 了 cc .Action 动作 父 类 以 及 瞬时 动作 和 持续 动作 ， 其 中 持 
续 动 作 又 包含 属性 变化 动作 、 视 觉 效果 动作 以 及 复合 动作 。 除 此 之 外 , 还 介绍 了 变速 动作 。 最 后 ， 
我 们 让 《保卫 葛 下 2》 主 页 面 动 了 起 来 。 

第 5 章 “ 事 件 机 制 ": 这 一 章 介 绍 了 事件 管理 器 、 和 触摸 事件 、 加 速 计 感应 事件 、 键 盘 事件 、 
鼠标 事件 、 自 定义 事件 等 。 最后， 在 这 一 章 的 实例 中 ， 封 装 了 一 个 虚拟 授 杆 。 

第 6 章 “ 音 频 处 理 ”: 这 一 章 介 绍 了 cc.audioEngine 的 常用 API, 列 出 了 Cocos2d-JS 在 各 
平台 下 支持 的 音频 格式 ， 并 讨论 了 背景 音乐 应 当 在 何 时 播放 最 为 合适 。 最 后 ， 给 《保卫 葛 下 2》 
添加 了 相关 的 音频 。 

第 7 章 “ 屏 幕 适 配 ?: 这 一 章 介绍 了 屏幕 适 配 原理 以 及 5 种 系统 预 设 适 配 模式 ， 分 别 是 
SHOW_ALL、NO_BORDER、EXACT_FIT、FIXED_HEIGHT、FIXED_WIDTH， 并 交代 了 官方 目前 推 
荐 的 适 配 方案 。 

第 二 部 分 为 进 阶 篇 ， 共 5 章 ， 各 章 简 述 如 下 。 

第 8 章 “ 数 据 存 储 ”: 这 一 章 介 绍 了 cc.sys.localstorage 的 用 法 , 以 及 JSON 和 plist 文 
件 的 读 取 。 最 后 ， 完 成 了 解锁 《保卫 葛 下 2》“ 天 天 向 上 ”玩法 的 开发 。 

第 9 章 “ 粒 子 系统 ”: 这 一 章 介 绍 了 cc.Particlesystem 类 ， 并 将 cc.Particlesystem 
类 的 属性 划分 为 粒子 配置 、 发 射 器 类 型 、 重 力 配置 、 径 向 配置 、 发 射 器 位 置 、 粒 子 纹理 、 粒 子 颜 
色 以 及 混合 函数 等 ， 还 介绍 了 ParticleDesigner 和 ParticleEditor 粒子 编辑 器 。 

第 10 章 “UI 控件 ”: 这 一 章 介绍 了 Cocos2d-JS 中 的 UI 控 件 ， 例 如 文本 、 编 辑 框 、 按 钮 、 复 
选 框 、 滑 块 、 加 载 条 、 布 局 、 滚 动 视图 、 列 表 视 图 以 及 分 页 视图 等 。 

第 11 章 “ 性 能 优化 ”: 这 一 章 介 绍 了 Cocos2d-JS 游戏 开发 的 一 些 优化 技巧 , 例如 对 象 缓冲 池 
cc .pool 的 使 用 , OpenGL/WebGL 下 可 以 使 用 批 处 理 SpriteBatchNode 进行 优化 , 在 Canvas 中 可 
以 将 不 活跃 的 Layer 烘 培 起 来 。 在 资源 管理 方面 ， 介 绍 了 SpriteSheet，SpriteSheet 可 以 通过 
TexturePacker 工具 制作 ， 并 在 这 一 章 的 最 后 抛 出 了 TinyPng 在 线 图 片 压缩 云 应 用 。 

第 12 章 “ 游 戏 地 图 ”: 这 一 章 介 绍 了 Tiled Map 编辑 器 的 用 法 , 还 讲解 了 cc .TMXTiledMap、 
CC.TMXLayer 以 及 cc .TMXObjectGroup 类 3 

第 三 部 分 为 高 级 篇 ， 共 4 章 ， 各 章 简 述 如 下 。 

第 13 章 “反射 调用 ”: 这 一 章 介 绍 了 如 何在 JavaScript 中 通过 反射 机 制 调用 Objective-C 和 Java 
代码 。 

第 14 章 “Chipmunk 物理 引擎 ”: 这 一 章 介绍 了 Chipmunk 物理 引擎 中 的 基本 物理 概念 ， 以 及 
刚体 、 形 状 、 约 束 、 空 间 、 碰 撞 检 测 、 查 询 等 。 最 后 ， 做 了 一 个 拖 动 刚体 的 效果 。 

第 15 章 “ 网 络 编程 ” : 这 一 章 介绍 了 OSI 参考 模型 和 TCP/IP 参考 模型 ， 以 及 基于 HTTP、 
WebSocket、SocketIO 的 通信 。 最 后 ， 完 成 了 一 个 基于 Nodejs + Scoket.IO 的 在 线 聊天 系统 。 

第 16 章 “JavaScript Binding”: 这 一 章 介 绍 了 Cocos 引擎 中 的 脚本 绑 定 框架 以 及 自动 绑 定 ， 
并 深入 探究 绑 定 技术 ， 一步 一 步 演示 如 何 绑 定 自 己 的 C++ 类 。 最 后 ， 实 现 了 SQLite3 的 绑 定 。 

第 四 部 分 为 实战 篇 ， 共 1 章 ， 简 述 如 下 。 

第 17 章 “ 塔 防 游 戏 一 一 保卫 葛 下 2”: 这 一 章 介 绍 了 《保卫 萝卜 2》 各 个 模块 的 开发 ， 例 如 


关卡 设 定 、 出 怪 逻 辑 、 炮 塔 生成 、 路 线 生 成 、 碰 撞 检 测 、 游 戏 对 象 管理 等 。 


读者 对 象 


本 书 适合 有 一 定 JavaScript 语法 基础 的 读者 。 因 为 本 书 并 没有 讲解 JavaScript 语法 ， 如 果 读 
者 不 熟悉 JavaScript 语法 ， 那 么 我 建议 你 先 去 阅读 《JavaScript 高 级 程序 设计 》 或 者 《JavaScript 
面向 对 象 编程 指南 》 等 书 。 

除 此 之 外 ， 再 无 其 他 要 求 ， 你 可 以 是 完全 不 懂 Cocos 引擎 的 初学 者 ,也 可 以 是 有 Cocos 引擎 
其 他 分 支 (例如 Cocos2d-x 和 Cocos2d-Lua ) 开发 经 验 的 开发 者 ， 甚 至 是 有 一 定 Cocos2d-JS 游戏 
开发 经 验 的 开发 者 。 


天 于 源 代 码 


书 中 所 有 的 源 代码 以 及 保卫 萝卜 2 的 实战 代码 均 可 在 图 灵 社 区 本 书 主 页 ( http://www.ituring. 
com.cn/book/1783 ) 或 我 的 Github 仓库 https://github.conylingjianfeng 中 下 载 。 
本 书 说 明 
口 为 了 方便 读者 ， 本 书 每 一 章 的 参考 资源 、 相 关 工 具 的 下 载 地 址 等 都 放 在 随 书 源码 中 ， 你 
可 以 直接 打开 源码 ， 将 参考 资源 或 下 载 地 址 复制 到 浏览 器 中 直接 打开 ， 而 不 用 自己 手动 
输入 。 
口 为 了 使 读者 能 更 快 、 更 好 地 阅读 代码 ， 本 书 中 的 所 有 代码 保持 了 代码 高 亮 样式 ， 并 且 采 
用 表格 的 方式 ， 明 确 标注 出 行 号 。 其 中 ，JavaScript 代码 高 亮 样式 与 WebStorm 保持 一 致 ， 
C++ 代码 与 Xcode 保持 一 致 ，Java 代码 和 Eclipse 保持 一 致 。 虽 然 本 书 不 是 彩色 印刷 ， 但 
是 在 黑白 印刷 上 ， 代 码 依旧 可 以 通过 粗细 来 达到 “高 亮 ” 效 果 ， 但 愿 我 这 样 的 坚持 能 给 
读者 带 来 更 好 的 体验 。 
口 为 了 突出 重点 ， 不 必要 显示 的 代码 我 用 /…… 替 代 ， 表 示 代 码 省 略 。 
口 为 了 节省 版 面 空间 , 书 中 部 分 图 片 经 过 Photoshop 处 理 , 大 部 分 裁剪 掉 了 一 些 没 用 的 空白 
区 域 等 ， 这 并 不 会 影响 读者 理解 相关 知识 点 。 
口 为 了 提高 代码 注释 的 可 阅读 性 ， 我 在 代码 注释 中 保留 了 我 个 人 的 注释 风格 ， 采 用 中 括号 
括 起 关键 词 ， 起 到 “高 亮 ”效果 ， 例 如 : / 加 载 [主页 面 ]。 
口 本 书 所 有 软件 默认 采用 Mac 版 。 
口 本 书 基 于 Cocos2d-JS 3.9 版 本 编写 。 
口 随 书 项 目 《保卫 葛 下 2》 中 的 所 有 素材 为 飞鱼 国际 科技 有 限 公 司 授权 于 本 书 作者 ， 读 者 可 
以 使 用 这 些 素材 来 学 习 Cocos2d-JS 引擎 ， 但 是 不 可 将 其 用 在 商业 途径 上 ， 若 有 违反 ， 飞 
鱼 国际 科技 有 限 公司 将 追究 相关 人 员 的 法 律 责任 。 


勘误 信息 


我 们 尽 最 大 的 努力 确保 正文 和 代码 没有 错误 , 但 是 人 无 完 人 , 金 无 足 赤 , 错误 在 所 难免 。 如 
果 读 者 发 现 书 中 的 任何 错误 , 例如 错别字 或 者 是 代码 片段 无 法 运行 等 问题 , 我 们 都 希望 你 能 及 时 
给 我 们 反馈 ,你 提交 的 勘误 不 仅 能 够 让 其 他 读者 受益 ， 也 能 帮助 我 们 进一步 提高 图 书 的 质量 。 

读者 可 以 在 图 灵 社 区 本 书 主页 (http:/www.ituring.com.cn/book/1783 ) 的 “勘误 ”页 面 提交 勘 
误 ， 编 辑 将 会 第 一 时 间 处 理 。 此 外 ， 你 还 可 以 给 我 发 送 邮 件 ， 我 的 邮箱 是 183720950@qq.com， 
邮件 主题 请 注 明 “图 书 勘误 ”， 我 将 在 收 到 邮件 后 的 第 一 时 间 回 复 。 或 者 ， 也 可 以 在 新 浪 微 博 中 
联系 我 ， 我 的 微 博 : @ 凌 建 风 。 

另外 ， 也 可 以 加 Cocos2d-JS 技术 交流 群 〈 群 号 : 186828918 )， 与 其 他 读者 一 起 交流 。 
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Cocos2d-JS 介 绍 


当今 世界 ， 互 联网 风起云涌 。 移 动 设备 的 普及 ， 更 是 让 手 游行 业 发 展 迅 速 ， 从 《 神 庙 逃 亡 》 
到 Flappy Bizd， 再 到 《纪念 碑 谷 》 等 ， 这 些 休闲 游戏 曾 一 时 间 风 摩 全 球 ， 可 谓 是 赚 得 金 销 满 盆 。 
而 由 《 刀 塔 传奇 》《 全 民 奇 迹 MU 》 以 及 《梦幻 西游 手 游 》 等 组 成 的 重度 游戏 明星 队伍 更 是 无 比 的 
辉煌 。2014 年 ,《 刀 塔 传奇 》 创 下 了 月 流水 2.8 亿 的 传奇 。2015 年 ,《 全 民 奇 迹 MU》 也 以 首 月 2.42 
亿 的 流水 造就 了 奇迹 ; 同年 ,《 梦 幻 西游 手 游 》 更 是 以 近 9 亿 的 月 流水 打造 出 了 其 自身 在 手 游行 业 
的 梦幻 王国 。 可 见 ， 手 游行 业 正 是 如 火 如 茶 。 

抛 开 手 游 的 市 场 情况 不 说 , 对 于 游戏 开发 者 而 言 ， 选择 一 款 优秀 的 游戏 引擎 是 开发 优质 游戏 
最 根本 的 前 提 。 值 得 一 提 的 是 ， 前 面 提 到 的 《 刀 塔 传奇 》 和 《梦幻 西游 手 游 》 这 两 款 2D 明 星 产 
品 句 是 采用 Cocos 游 戏 引 擎 打造 而 成 的 。 

近 几 年 ,各 大 游戏 引擎 可 谓 是 白 家 争鸣 ,有 的 在 历史 长 河中 销声匿迹 ， 有 的 历经 万 般 考 验 仍 
屹立 不 倒 。 现 如 今 ，Cocos 和 Unity 3D 分 别 在 2D 和 3D5 引 擎 中 脱颖而出 ， 各 领 风骚 ， 独 具 一 格 。 而 
本 书 的 主角 Cocos2d-JS 正 是 目前 Cocos 引 擎 全 力 推 广 的 一 个 重要 分 支 。 


本 章 内 容 : 


口 Cocos 引 擎 家 族 
口 Cocos2d-JS 介 绍 
口 引擎 目录 结构 


1.1 Cocos2d 引擎 家 族 


正 所 谓 “ 吃 水 不 忘 挖 井 人 ”。 记 得 去 年 我 大 学 毕业 后 在 宝宝 巴士 (福建 ) 网 络 科 技 有 限 公 司 
工作 时 ， 公 司 技术 总 监 指派 给 我 一 个 任务 ， 让 我 研究 一 下 LiquidFun 流 体 引 擎 ， 并 用 LiquidFun 做 
出 公司 一 款 产 品 的 Demo。 在 此 过 程 中 ， 我 遇 到 一 个 比较 棘手 的 问题 ， 短 时 间 内 无 法 解决 ， 无 奈 
之 下 找到 官方 人 员 帮 忙 解答 。 而 Cocos2d-x 和 LiquidFun 整 合 是 由 Ricardo Quesada ( Cocos2d 之 父 ， 
后 面 将 介绍 ) 完成 的 , 所 以 官方 人 员 便 给 了 我 Ricardo 的 联系 方式 ， 让 我 求助 于 他 。 可 当初 天 真 无 
那 的 我 间 了 一 句 ，Ricardo 是 谁 ” 这 看 上 去 似乎 是 一 件 很 小 的 事情 ， 但 是 却 一 直 藏 在 我 心里 深 处 。 
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虽然 我 在 使 用 Cocos 引 擎 ， 却 不 知道 Ricardo 是 谁 。 因 此 ， 我 认为 在 学 习 Cocos2d-JS 引 警 之 前 ， 非 
常 有 必要 介绍 一 下 Cocos 引 擎 的 先祖 以 及 Cocos 引 警 的 家 族 史 。 


1.1.1 Cocos2d 的 诞生 


2008 年 2 月 ， 在 阿根廷 C6rdoba 市 附近 一 个 名 为 Los Cocos 的 地 方 ，Ricardo Quesada 和 他 的 几 个 
朋友 使 用 Python 语言 开发 出 了 一 款 2D 游 戏 引 警 , 并 且 根 据 这 个 游戏 引擎 的 诞生 地 , 将 其 取 名 为 Los 
Cocos。 一 个 月 之 后 ， 他 们 便 发 布 了 引擎 的 release 0.1 版 本 ， 并 正式 将 该 引擎 更 名 为 Cocos2d。 

不 久之 后 ， 苹 果 公 司 正式 成 立 App Store， 并 且 发 布 了 SDK， 大 量 的 开发 人 员 被 App Store 所 
吸引 ， 各 种 各 样 的 应 用 和 游戏 E 了 ioOgS 平 台 。Ricardo Quesada 团 队 把 握 住 了 时 机 ， 在 2008 年 6 月 
宣布 将 接 入 iPhone 平 台 ， 并 于 当月 就 发 布 了 以 Objective-C 为 基础 的 Cocos2D for iPhone 0.1 版 本 ， 
此 版 本 延续 了 Python 版 的 框架 和 设计 思路 。 随 着 iOS 用 户 越 来 越 多 ，iPhone 游 戏 也 成 为 了 用 户 最 
爱 的 应 用 。 

到 2010 年 9 月 ，Cocos2D 引 擎 已 经 在 游戏 开发 者 中 流行 。 许 多 开发 者 第 一 次 接触 Cocos2d for 
iPhone 引擎 ， 此 版 本 是 Cocos2D 引 警 当 中 的 明星 产品 。 由 于 Cocos2d for iPhone 非常 成 熟 晶 功能 很 
完善 , 它 在 开发 者 中 得 到 广泛 传播 并 使 用 。 随 后 StickWars 成 为 第 一 款 在 美国 区 付费 榜 夺 得 冠军 的 
Cocos2D 游 戏 ,这 宣告 了 Cocos2D 引 擎 时 代 的 到 来 。 同 时 ,英国 的 设计 大 师 Michael Heald 为 Cocos2D 
设计 了 新 的 logo， 如 图 1-1 所 示 ( 此 前 Cocos2D 的 logo 是 一 个 奔跑 的 椰子 )， 图 1-2 和 图 1-3 分 别 为 
Cocos2d-x 早 期 logo 和 Cocos2d-x 引 擎 现在 的 logo。 
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图 1-1 Cocos2D logo 图 1-2 Cocos2d-x 早 期 logo 图 1-3 Cocos2d-x 现 在 logo 


也 正 是 在 那个 时 候 ，Cocos2D 社 区 的 开发 者 开发 出 了 最 早 的 周边 工具 一 一 Zwoptex 和 Particle 
Designer。 关 于 Particle Designer 的 更 多 信息 ， 可 参见 第 9 章 。 


说 明 Zwoptex 为 早期 的 精灵 表 制 作 工具 ， 现 在 更 常用 的 精灵 表 制 作 工 具 为 TexturePacker， 详 情 
可 参见 第 11 章 。 
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1.1.2 ”Cocos 引擎 家 族 大 事 记 


2010 年 11 月 ,来 自 中 国 厦门 ha ET Bt 队 基 于 Cocos2D 制 作出 了 Cocos2d-x 引 
警 。Cocos2d-x 引 警 同 样 采用 MIT 开 源 协议 ,“x” 意 味 着 Cross， 表 示 交 叉 的 意思 ， 使 用 Cocos2d-x 
开发 出 来 的 游戏 被 允许 编译 和 运行 在 多 平台 上 。 开 发 者 只 需 使 用 C++ 语言 编写 一 次 游戏 逻辑 ， 便 
可 将 游戏 运行 在 iOS、Android、Mac OS X 以 及 Windows 等 平台 上 。 毫 无 疑问 ，Cocos2d-x 开 启 了 
Cocos2D 引 擎 跨 平 台 开 发 的 时 代 。 

同一 时 期 ， 美 国人 采用 C#， 基 于 Mono 改 写成 CocosNet， 新 西 兰 人 Ryan Williams 用 JavaScript 
改写 了 HTML5 Canvas 的 版 本 等 ， 社 区 也 出 现 了 Texture Packer、Glyph Designer 等 丰富 的 工具 和 编 
辑 器 ，Cocos2D 家 族 进 入 了 易 盛 时 期 。 

2011 年 ，Cocos2D 家 族 有 了 新 的 发 展 ， 集 成 式 的 编辑 器 开始 涌现 ， 其 中 包括 CocoShop 、 
CocosBuilder 、Sprite Helper 、Level Helper 等 。 

2011 年 5 月 ，Zynga 公 司 雇佣 了 Cocos2d-iPhone 的 两 位 核心 作者 Ricardo Quesada 和 Rolando 
Abarca， 两 位 程序 员 分 别 从 阿根廷 和 智利 迁移 到 Zynga 的 旧金山 总 部 工作 。 

2011 年 和 年底， 谷歌 赞助 Cocos2d-x 团 队 将 Cocos2d-x 移 植 到 Cocos2d-HTMLS 版 本 ， 实 现 Web 游 
戏 类 型 的 覆盖 ， 特 别 是 移动 Web 游 戏 的 开发 。 

2012 年 1 月 , 林 顺 负责 维护 的 Cocos2d-HTMLS 项 目 正 式 启 动 , 并 于 同年 8 发 布 了 第 一 个 稳定 
版 本 v2.0。 因 为 它 是 基于 Cocos2d-x 2.0 版 本 移植 的 ， 所 以 Cocos2d-HTMLS 第 一 版 发 布 的 就 是 2.0 
版 本 , 并 没有 发 布 v1.0 的 相关 版 本 。 与 此 同时 ，Rolando Abarca 也 主导 并 开发 了 一 套 基 于 Cocos2d-x 
和 SpiderMonkey 的 JavaScript 自 动 绑 定 技术 〈 详 见 第 16 章 )。 

2012 年 12 月 4 日 ，Cocos2d-x 团 队 发 布 了 第 一 个 Cocos2d-HTML5 联 合 版 本 ， 从 那 时 起 ， 
Cocos2d-HTML5 的 游戏 便 可 同步 发 布 到 Web 和 原生 游戏 平台 上 。 

2013 年 11 月 ，Cocos2d 之 父 Ricardo Quesada 加 入 Cocos2d-x 团 队 ， 并 出 任 Cocos2d-x 团 队 的 首席 
架构 师 。 

2014 年 3 月 ， 为 了 提供 更 加 一 致 的 开发 体验 ， 真正 实现 跨 全 平台 ，Cocos2d-x 团 队 将 Cocos2d-x 
JSB 模 块 从 Cocos2d-x 中 独立 出 来 ， 并 对 Cocos2d-HTML5 进 行 整合 升级 ,将 Cocos2d-HTML5 改 名 
为 Cocos2d-JS， 然 后 发 布 了 Cocos2d-JS 引 擎 。 

2014 年 9 月 12 日 ，Cocos2d-x 团 队 发 布 了 Cocos2d-JS 的 Cocos2d-JS v3.0 final 稳 定 版 本 ， 
Cocos2d-JS 应 用 而 生 。 

2015 年 7 月 21 日 ，Cocos2d-x 团 队 发 布 了 Cocos2d-x 3.7 版 本 ， 为 了 统一 Cocos2d-x 引 擎 ， 
Cocos2d-JS 被 并 人 Cocos2d-x 引 擎 中 。 
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1.2 ”Cocos2d-JS 介绍 


大 千 世 界 ， 奥 钞 无 穷 ， 我 们 穷 一 生 仍 不 能 学 习 其 皮毛 。 因 此 ， 学 习 任何 东西 之 前 ， 都 应 该 明 
确 所 学 之 物 为 何 物 ， 为 何 而 学 ， 学 习 Cocos2d-JS 游 戏 引擎 自然 也 不 例外 。 官 方 对 Cocos2d-JS 的 介 


绍 是 : 


Cocos2d-JS 是 跨 全 平台 的 游戏 引擎 ， 采 用 原生 JavaScript 语 言 ， 可 发 布 到 Web 平 台 、iOS、 
Android、Windows Phone 8、Mac、Windows 等 平台 。 该 引擎 基于 MIT 开 源 协议 ， 完 全 开源 、 免 费 ， 
易学 易 用 ， 拥 有 活跃 的 社区 支持 。Cocos2d-JS 让 2D 的 游戏 编程 门槛 更 低 ， 使 用 更 加 容易 和 高 效 。 
和 其 他 类 似 游戏 框架 相 比 ， 它 定义 了 更 加 清晰 的 2D 游 戏 编程 的 基本 组 件 ， 采 用 易学 易 用 的 API 设 
计 ， 并 采用 全 球 领 先 、 有 具备 原生 性 能 的 脚本 绑 定 解 决 方案 实现 游戏 的 跨 原 生平 台 发 布 ， 开 发 效率 
更 高 ， 使 用 上 最 简单 。 

那么 ，Cocos2d-JS 和 Coco2d-x 是 什么 关系 呢 ? 实际 上 ，Cocos2d-JS 是 Cocos2d-x 的 JavaScript 
版 本 。Cocos2d-JS 的 前 身 为 Cocos2d-HTML5， 在 3.0 版 本 之 后 ， 官 方 对 Web 引 擎 Cocos2d-HTML5S 
和 Native 引 擎 Cocos2d-x 进 行 整合 ， 并 为 Web 和 各 原生 平台 开发 提供 了 一 套 统一 的 工作 流 ， 开 发 者 
只 需要 关注 自己 游戏 的 JavaScript 业 务 逻 辑 代 码 ， 然 后 使 用 Cocos Console 工 具 管理 开发 以 及 发 布 
等 流程 。 图 1-4 为 Cocos2d-JS 引 擎 的 架构 图 。 
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图 1-4 Cocos2d-JS 引 擎 的 架构 图 


如 图 1-4 所 示 ， 可 将 Cocos2d-JS 引 警 的 结构 分 为 4 层 。 最 底层 为 支持 的 平台 ， 包 括 Web 、iOS、 
Android、Mac OS X 以 及 Windows 等 。 

中 间 层 为 Cocos2d-HTML5 和 Cocos2d-x JSB ( JavaScript Binding 的 缩写 ) 这 两 个 引擎 。 其 中 ， 
Cocos2d-HTMLS 为 一 个 采用 JavaScript 语 言 编写 的 独立 引擎 ， 采 用 Canvas 或 者 WebGL 泻 染 ， 并 且 
完全 兼容 HTML5 规 范 ， 使 用 Cocos2d-HTML5 编 写 的 游戏 可 以 运行 在 浏览 器 上 。 
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Cocos2d-x JSB 则 是 一 个 介 于 Cocos2d-x 原 生 代 码 和 JavaScript 代 码 之 间 的 桥接 层 。Cocos2d-x 
JSB 实 现 了 JavaScript 代 码 和 Cocos2d-x 引 擎 之 间 的 相互 调用 ， 而 这 一 实现 得 益 于 SpiderMonkey。 
SpiderMonkey 是 一 个 JavaScript 虚 拟 机 ,采用 C/C++ 开发 ， 由 Mozilla 维 护 。SpiderMonkey 虚 拟 机 不 
仅 可 以 被 般 入 在 浏览 器 上 ， 也 可 被 钥 入 到 任何 C++ 程 序 中 。 在 Cocos2d-x JSB 中 ， 开 发 者 编写 的 
JavaScript 游 戏 业 务 逻 辑 代码 就 是 SpiderMonkey 负 责 解析 和 运行 的 。 值 得 一 提 的 是 ，Cocos2d-JS 中 
殴 入 的 SpiderMonkey 是 被 Cocos2d-x 团 队 改 造 过 的 ， 从 而 支持 了 Cocos2d-x 的 类 型 、 数 据 结构 以 及 
对 象 等 。 

综 上 所 述 , 使 用 Cocos2d-JS 开 发 出 来 的 游戏 不 仅 可 以 运行 在 浏览 器 上 , 还 可 以 通过 Cocos2d-x 
JSB 的 支持 将 游戏 打包 到 原生 平台 上 ， 例 如 iOS 、Android 以 及 Mac OS X 等 。 

再 上 面 一 层 为 Cocos2d-JS API 层 , 它 保证 了 Cocos2d-HTMLS 和 Cocos2d-xJSB 的 API 高 度 一 致 ， 
从 而 让 开发 者 开发 出 来 的 游戏 不 用 修改 代码 或 者 只 修改 少量 代码 ， 就 可 以 打包 为 原生 平台 游戏 ， 
从 而 实现 一 次 编码 、 全 平台 运行 的 畅 素 体验 。 最 上 层 即 为 JavaScript 编 写 的 Cocos2d-JS 游 戏 逻 辑 代 
码 。 


1.3 引擎 目录 结构 


从 Cocos2d-x 3.7 版 本 之 后 ， 官 方 将 Cocos2d-JS 引 警 整 合 到 Cocos2d-x 中 。Cocos2d-x 引 擎 可 在 
Cocos 官 网 下 载 , 其 下 载 地 址 为 : http://www.cocos.com/download/ 当然 , 亦 可 从 Cocos2d-x 的 GitHub 
仓库 拉 取 ， 仓 库 地 址 : https:/github.com/cocos2d/cocos2d-x。 下 载 完成 后 ， 引 擎 包 的 主要 内 容 如 
表 1-1 所 示 。 


表 1-1 引擎 包 的 主要 内 容 


目录 或 文件 名 内 容 简介 
AUTHORS 作者 目录 ， 包 含 所 有 给 Cocos2d-x 引 擎 贡献 代码 的 开发 者 
build 包含 测试 例子 、cocos2d lib 的 Xcode 以 及 Visual Studio 工 程 
CHANGELOG 所 有 历史 版 本 详细 改动 列表 
CMakeLists.txt cmake 配 置 文件 
cocos Cocos2d-x 引 警 源 代码 
CONTRIBUTING.md 贡献 代码 指南 
docs 包含 JavaScript 代 码 风格 规范 、 当 前 发 布 说 明和 当前 版 本 升级 指南 
download-deps.py 下 载 第 三 方 库 的 脚本 
extensions 第 三 方 扩展 
external 存放 第 三 方 库 的 文件 夹 
licenses 所 有 许可 协议 
plugin 插件 
README.cmake 针对 cmake 用 法 的 说 明文 件 
README.md Cocos2d-x 引 警 简 介 
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( 续 ) 
目录 或 文件 名 内 容 简介 
setup.py Cocos Console 的 安装 脚本 
templates Cocos Console 创 建 项 目 时 使 用 的 模板 
tests 各 分 支 的 测试 项 目 
tools 工具 文件 夹 
一 bindings-generator 脚本 绑 定 工具 
一 cocos2d-console Cocos Console 工 具 
一 tojs JSB 自 动 绑 定 配置 文件 以 及 生成 脚本 
一 tolua Lua 绑 定 配置 文件 以 及 生成 脚本 
web Cocos2d-JS 游 戏 引 擎 
1.4 小 结 


通过 本 章 的 学 习 ， 我 们 知道 了 Cocos 引 擎 的 家 族 史 ， 了 解 了 Ricardo Quesada 为 Cocos2D 之 父 ， 
王 折 和 林 顺 分 别 为 Cocos2d-x 和 Cocos2d-HTML5 引 擎 的 创始 人 。 除 此 之 外 ， 我 们 还 了 解 了 
Cocos2d-x 和 Cocos2d-JS 之 间 的 关系 ， 以 及 Cocos2d-JS 的 引擎 架构 。 最 后 ,我 们 还 介绍 了 Cocos2d-x 
引擎 包 的 目录 结构 。 


1.5 参考 资源 


本 章 的 参考 资源 如 下 。 

口 维基 百科 Cocos2d: https://en.wikipedia.org/wiki/Cocos2d。 

口 Cocos 官 网 : http://www.cocos.com/。 

口 LiquidFun 流 体 引 擎 : http://google.github.io/liquidfun/。 

口 傅 思 杰 ( 偶尔 e 网 事 ) 整理 的 Cocos 资 料 大 全 : https://github.com/fusijie/Cocos-Resoure。 
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Hello World 


古语 有 云 :“ 工 欲 善 其 事 , 必 先 利 其 器 。” 唯 有 配备 好 了 装备 , 方 可 上 阵 杀 敌 。 学 习 Cocos2d-JS 
游戏 引擎 , 亦 是 如 此 。 本 章 将 讲解 Cocos2d-JS 在 各 平台 下 的 环境 搭建 、Hello World 解 析 以 及 Cocos 
DevTools 工 具 等 。 
本 章 内 容 : 
口 Cocos Console 
口 创建 、 编 译 和 运行 工程 
口 HelloWorld 的 目录 结构 
口 项 目 在 Web 和 Native 上 的 启动 流程 
口 项 目 在 各 平台 下 的 打包 以 及 部 署 
口 js-tests 测 试 工 程 
口 为 《保卫 莹 卜 2》 项 目 做 准备 
口 实例 一 一 利用 Cocos DevTools 学 习 Cocos2d-JS 


2.1 Cocos Console 


Cocos Console 是 Cocos2d-x 引 擎 下 的 一 个 命令 行 工 具 ， 它 用 来 管理 Cocos 工 程 ， 其 中 包含 创 
建 、 运 行 、 编 译 、 调 试 以 及 打包 项 目 等 。 

Cocos Console 位 于 引擎 包 cocos2d-x/tools/cocos2d-console 目 录 下 ， 通 过 运行 引擎 包 目 录 下 的 
setup.py 脚 本 即 可 安装 。 在 安装 的 过 程 中 ，Cocos Console 需 要 开发 者 提供 Android NDK、Android 
SDK 和 Apache ANT 的 文件 路 径 。 另 外 ，Cocos Console 是 一 个 采用 Python 语言 编写 的 跨 平 台 脚 本 工 
具 ， 所 以 在 安装 Cocos Console 之 前 ， 需 要 先 安装 好 Python。 


2.1.1 安装 Python 


在 Mac OS X 中 ， 操 作 系 统 本 身 自 带 了 Python ， 而 在 Windows 操 作 系统 中 ，Python 则 需要 我 们 
自行 下 载 并 安装 ， 其 下 载 地 址 为 : https:Wwww.python.org/downloads/index.html。 知 你 的 Mac OS 和 X 
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系统 中 没有 Python， 也 可 通过 此 地 址 下 载 安装 。 下 载 至 Mac OSX 和 Windows 上 的 安装 包 分 别 是 一 
个 .pkg 或 者 .msi 文 件 ， 例 如 我 下 载 的 是 python-2.7.10-macosx10.6.pkg 和 python-2.7.10.msi 文 件 ， 如 


图 2-1 所 示 。 
oz 得 


python-2.7.10- 
macosx10.6.pkg python-2.7.10.msi 


图 2-1 Python 在 Mac OSX ( 左 ) 和 Windows 上 的 安装 包 ( 右 ) 


1. 在 Mac OS X 上 安装 Python 

在 Mac OS X 上 ，Python 的 安装 较为 简单 ， 双 击 打开 python-2.7.10-macosx10.6.pkg 文 件 ， 然 后 
一 直 点 击 “ 继 续 ”按钮 ， 即 可 完成 安装 。 

2. 在 Windows 上 安装 Python 

在 Windows 操 作 系 统 中 ，Python 的 安装 步骤 可 分 如 下 两 步 。 

(1) Python 安装 : 双击 python-2.7.10.msi 文 件 将 其 打开 ， 将 Python 安装 在 指定 磁盘 路 径 下 ， 这 
里 我 将 Python 安装 到 CNPython27。 

(2) 环境 变量 配置 : 当 Python 安装 成 功 后 ， 还 需要 配置 系统 环境 变量 ， 具 体 步 又 如 下 。 

GD 右 击 “我 的 电脑 ”， 从 打开 的 快捷 菜单 中 选择 “属性 ”菜单 。 

@) 此 时 会 打开 “属性 ”对 话 框 ， 从 中 选择 “高 级 系统 设置 ”选项 卡 。 

人 点击“ 环境 变量 CN)…” 按 钮 ， 打 开 “ 环 境 变量 ”对 话 框 。 

@@ 从 “系统 变量 (S)” 列 表 框 中 选择 “ path”， 然 后 点 击 “编辑 (DD)...” 按钮 。 

在 变量 值 的 最 后 输入 Python 的 安装 路 径 ， 并 在 路 径 前 面 加 上 一 个 分 号 ,例如 ;C:\Python27， 
这 是 因为 每 个 环境 变量 之 间 需 要 用 分 号 隔 开 。 

@ 点击 “确定 ”按钮 关闭 窗口 。 至 此 ，Windows 上 的 Python 安装 成 功 。 

3. Python 验证 


在 Mac OS X 下 ， 可 以 打开 终端 ( Windows 中 为 命令 行程 序 )， 输 入 python --version。 注 
，version 之 前 为 两 个 杠 〈(- )， 若 出 现 如 图 2-2 或 图 2-3 所 示 的 界面 ， 便 说 明 Python 安 装 成 功 。 


澳 
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©@®® 合 Jeff 一 -bash 一 42x5 画 C:\Windows\syste... - 口 
Jeffs-MacBook-Pro:~ Jeff$ python --version Microsoft Windows [版 本 6.2.9266] re 
Python 2.7.10 (c) 2912 Microsoft Corporation。 提留 所 有 权利 - 
Jeffs-MacBook-Pro:~ Jeff$ | ne --uersion 
C:NUsersNLingJianfeng> 目 
< 
图 2-2 Mac OS X 下 Python 验证 图 2-3 Windows 下 Python 验证 


说 明 本 书 撰写 时 ，setup.py 脚 本 采用 Python 2.7 编 写 ， 并 不 支持 Python3， 所 以 本 书 在 Mac OSX 
上 采用 Python 2.7.10 的 64 位 版 本 。 在 Windows 上 ， 选 用 Python 2.7.10 的 32 位 版 本 。 


2.1.2 ”Android 环境 配置 


当 安 装 好 Python 之 后 ， 你 便 可 以 开始 准备 Android 相 关 的 软件 包 了 了。 当然 ， 震 你 不 需要 支持 
Android， 除 了 Apache Ant 之 外 ， 其 余 步 又 可 以 跳 过 ， 不 必 配 置 。Android 所 需 的 相关 软件 包 如 下 
所 示 。 

口 Apache Ant: 将 软件 编译 、 测 试 、 部 署 等 步骤 联系 在 一 起 加 以 自动 化 的 一 个 工具 ， 大 多 

用 于 Java 环 境 中 的 软件 开发 。 下 载 地 址 : http://ant.apache.org/bindownload.cgi。 

口 Android SDK: 即 Software Development Kit 的 简称 ， 中 文 译 为 软件 开发 工具 包 。 在 Android 
中 ， 它 为 开发 者 提供 了 库 文件 以 及 其 他 开发 所 用 到 的 工具 。 下 载 地 址 : 
http://developer.android.com/ tools/sdk/ndk/index.html。 

口 Android NDK: 即 Native Development Kit 的 简称 , 它 是 一 系列 工具 的 集合 ， 可 以 帮助 开发 
者 快速 开发 C/C++ 的 动态 库 。 男 外 ， 它 还 能 自动 将 .so 文件 和 Java 应 用 一 起 打包 成 .apk。 下 
载 地 址 : https://developer.android.com/sdk/index.html?hl=sk。 

口 JDK: Java 的 开发 工具 包 ， 包 括 Java 运 行 环境 、Java 工 具 和 Java 基 础 类 库 。 下 载 地 址 : 


https://www.oracle.com/downloads/index.htm! 。 


当下 载 好 以 上 所 需要 的 依赖 后 ， 便 可 以 正式 安装 Cocos Console 了。 此 时 打开 终端 ( Windows 
下 为 命令 行程 序 )， 进 入 Cocos2d-x 引 警 目 录 下 ， 然 后 再 运行 setup.py 脚 本 ， 相 关 命 令 如 下 : 


1 cd /Users/Jeff/Documents/Cocos/cocos2d-x 
2 python setup.py 


其 中 , Jeff 为 笔者 的 用 户 名 。 在 读者 的 电脑 上 , 以 读者 的 用 户 名 为 准 。 然后 根据 提示 , 将 Cocos 
Console 所 需 的 文件 路 径 拖 忠 进去 ， 最 后 根据 末尾 行 提示 进行 对 应 的 操作 。 例 如 ， 在 Mac OS X 上 
应 该 再 运行 如 下 命令 : 

1 source /Users/Jeff/.bash profile 

而 在 Windows 操 作 系 统 中 ， 则 重启 命令 行程 序 即 可 。 但 是 实际 上 ,在 Mac OS X 上 ， 也 需要 重 
新 启动 终端 程序 。 另 外 ， 值 得 注意 的 是 ，Apache Ant 路 径 需 要 指定 到 bin 文 件 夹 下 。Mac OS X 和 
Windows 操 作 系 统 上 Cocos Console 的 安装 过 程 分 别 如 图 2-4 和 图 2-5 所 示 。 
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©@e@e@ cocos2d-x 一 -bash — 106x31 


[Jeffs-MacBook-Pro:~ Jeff$ cd /Users/Jeff/Documents/Cocos/cocos2d-x ] 
[Jeffs-MacBook-Pro:cocos2d-x Jeff$ python setup.py } 


Setting up cocos2d-x... 
—>Check environment variable COCOS_CONSOLE_ROOT 
->Search for environment variable COCOS_CONSOLE_ROOT... 
—>COCOS_CONSOLE_ROOT is found : /Users/Jeff/Documents/Cocos/cocos2d-x/tools/cocos2d-console/bin 


—>Check environment variable COCOS_TEMPLATES_ROOT 
—>Search for environment variable COCOS_TEMPLATES_ROOT,... 
->C0C0S_TEMPLATES_ROOT is found : /Users/Jeff/Documents/Cocos/cocos2d-x/templates 


->Configuration for Android platform only, you can also skip and manually edit "/Users/Jeff/,bash_profile" 


—>Check environment variable NDK_ROOT 
->Search for environment variable NDK_ROOT,.. 
->NDK_ROOT is found : /Users/Jeff/Documents/Cocos/Android_PATH/android-ndk-r9d 


—>Check environment variable ANDROID_SDK_ROOT 
->Search for environment variable ANDROID_SDK_ROOT... 
—>ANDROID_SDK_ROOT is found : /Users/Jeff/Documents/Cocos/Android_PATH/sdk 


->Check environment variable ANT_ROOT 
->Search for environment variable ANT_ROOT,.. 
->ANT_ROOT is found ; /Users/Jeff/Documents/Cocos/Android_PATH/apache-ant-1.9.3/bin 


Please execute command: "Source /Users/Jeff/,bash_profite" to make added system variables take effect 


lJeffs-MacBook-Pro:cocos2d-x Jeff$ source /Users/Jeff/.bash_profile ] 
Jeffs-MacBook-Pro:cocos2d-x Jeff$ | | 


图 2-4 Mac OS 义 下 Cocos Console 的 安装 过 程 


注意 在 Mac OS X 上 将 文件 夹 拖 旨 进 去 时 ， 路 径 的 末尾 会 有 一 个 空格 ， 应 将 空格 删除 。 


Es| C:\Windows\system32\cmd.exe 二 二 | 


Microsoft Windows [版 本 6.2.9290] 
(c) 2612 Microsoft Corporation。 保 留 所 有 权利 。 


C:NUsers\LingJianfeng>cd C:\Users\LingJianfeng\Desktop\cocos2d-x 
C:\Users\LingJianfeng\Desktop\cocos2d-x>python setup.py 


Setting up cocos2d-x... 
->Check environment variable COCOS_CONSOLE_ROOT 
->Search for environment variable COCOS_CONSOLE_ROOT... 
->COCOS_CONSOLE_ROOT is found : C:\Users\LingJianfeng\Desktop\cocos2d-x\tools\cocos2d-console\bin 


->Check environment variable COCOS_TEMPLATES_ROOT 
->Search for enuironment variable COCOS_TEMPLATES_ROOT... 
->COCOS_TEMPLATES_ROOT is found : C:\Users\LingJianfeng\Desktop\cocos2d-x\templates 


->Configuration for hndroid platform only, you can also skip and manually edit your enuironment variables 
->Check environment variable NDK_ROOT 
->Search for enuironment variable NDK_ROOT... 
->NDK_ROOT is found : C:\Users\LingJianfeng\Desktop\jsb\ndk\android-ndk-r9d 
->Check enuironment variable ANDROID_SDK_ROOT 
->Search for environment variable ANDROID_SDK_ROOT... 
->ANDROID_SDK_ROOT is found : C:\Users\LingJianfeng\Desktop\jsb\sdk\android-sdk-windows 
->Check enuironment variable ANT_ROOT 


->Search for environment variable ANT_ROOT... 
->ANT_ROOT is found : C:\Users\LingJianfeng\Desktop\jsb\ant\apache-ant-1.9.4\bin 


Please restart the terminal or restart computer to make added system variables take effect 


C:\Users\LingJianfeng\Desktop\cocos2d-x>m 
搜狗 拼音 输入 法 半 : 必 


图 2-5 ”Windows 下 Cocos Console 的 安装 过 程 
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此 时 ，Cocos Console 安 装 成 功 。 若 要 仓 载 Cocos Console， 则 Mac OS X 用 户 可 删除 /Users/ 用 户 
名 /下 .bash_profile 文 件 中 对 应 的 值 ， 而 Windows 用 户 只 需 删 除 对 应 的 系统 环境 变量 值 即 可 。 


2.2 创建 、 编 译 和 运行 工程 


当 Cocos Console 安 装 完毕 后 ， 便 可 通过 Cocos Console 创 建 Cocos2d-JS 工 程 ， 具 体 有 如 下 几 种 
方式 : 


1 // 创建 一 个 名 为 projectName， 并 同时 包含 Cocos2d-HTML5 和 Cocos2d-x JSB 的 项 目 
cocos new projectName -1 js 

3 // 创建 一 个 名 为 DrojectName， 且 仅 含 Cocos2d-HTML5 的 项 目 ， --no-native 表 示 不 需要 支持 Native 平 
台 (iOS、Android、Mac、Windows 等 ) ， 仅 支持 浏览 器 即 可 

cocos new projectName -1 js --no-native 

// 在 桌面 上 创建 一 个 名 为 projectNarme 的 项 目 

cocos new projectName -1 js -d ./Desktop 

// 在 桌面 上 创建 一 个 名 为 DrojectName 的 项 目 ， 并 设置 为 坚 屏 


Cocos new projectName -1 js -d ./Desktop --portrait 


此 外 ， 亦 可 通过 如 下 命令 在 桌面 上 创建 一 个 名 为 HelloWorld 的 工程 : 


1 cd ./Desktop 
2 cocos new HelloWorld -1 js 


其 中 ，-1 表 示 采 用 的 语言 ， 可 选 值 为 copp 、lua 以 及 js。 运 行 命令 之 后 ， 便 可 在 桌面 上 看 到 
eg 图 2-6 为 HelloWorld 工 程 的 创建 过 程 。 


oo OU 


©O@e@ 司 | 桌面 一 -bash 一 66x16 


[Jeffs-MacBook-Pro:~ Jeff$ cd ./Desktop ] 
[Jeffs-MacBook-Pro:Desktop Jeff$ cocos new HelloWorld -1l js 

执行 命令 : new 

> 拷贝 模板 到 /Users/Jeff/Desktop/HelloWorld 

> 拷贝 引擎 中 的 文件 夹 ..， 

拷贝 模板 中 的 文件 夹 ..， 

拷贝 cocos2d-x ,,， 

替换 文件 名 中 的 工程 名 称 ，'HelloJavascript' 替换 为 'HelloWorld'。 

替换 文件 中 的 工程 名 称 ，'HelloJavascript' 蔡 换 为 'HelloWorld'。 

> 替换 工程 的 包 和 名，'org.cocos2dx.hellojavascript' 替换 为 'org.cocos 
2dx.HelloWorld'。 

> 蔡 换 Mac 工程 的 Bundle ID，'org.cocos2dx.hellojavascript' 替换 为 
'org.cocos2dx.HelloWworld'。 

> 替换 i0S 工程 的 Bundle ID，'org.cocos2dx.hellojavascript' 替换 为 
'org.cocos2dx.HelloWorld'。 

Jeffs-MacBook-Pro:Desktop Jeff$ 国 


VVVYV 


图 2-6 ”Cocos Console 创 建 工程 的 过 程 图 
当 项 目 创建 完毕 后 ， 可 以 通过 下 列 命令 将 项 目 运行 在 浏览 器 中 ， 效 果 如 图 2-7 所 示 : 


1 cd ./Desktop/HelloWorld 
2 cocos run -p web 
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Cocos2d-html5 Hello Worl x 志 轩 


Ch 127.0.0.1:8000 yr 上书 三 


Hello World 


图 2-7 运行 在 浏览 需 上 的 HelloWorld 工 程 


除 创建 命令 外 ，Cocos Console 还 为 工程 提供 了 运行 、 编 译 等 命令 ， 具 体 如 下 : 
1 // 运行 在 指定 的 平台 上 

2 cocos run -p weblioslandqroidlmaclwin32 

3 // 将 项 目 工 程 打包 到 指定 的 平台 上 

4 


cocos compile -p weblioslandroidlmaclwin32 -m release 
值得 说 明 的 是 ， 若 发 布 在 Web 平 台 上 ， 可 添加 --aqvanceq 人 参数 ， 它 表示 使 用 Closure 编 译 器 
的 高 级 模式 编译 JS 文件 ,这 将 获得 更 高 的 压缩 率 , 但 是 有 出 现 bug 的 风险 ,请 读者 自行 其 酌 使 用 。 
知 出 现 bug， 可 参考 https:/developers.google.comy/closure/compilerdocs/api-tutorial3 解 决 。 另 外 ， 
Cocos Console 提 供 了 相关 的 help 指 令 ， 方便 开发 者 查询 Cocos Console 相 关 的 指令 。 下 面 举 几 个 
help 指 令 的 例子 ， 其 中 help 可 用 字母 ph 替代: 


1 cocos new --help 


Cocos run --help 
3 cocos compile --help 
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此 时 ， 虽 然 基 于 Cocos2d-JS 的 HelloWorld 工 程 创 建 完 毕 ， 并 且 也 成 功 地 运行 在 浏览 器 上 ， 但 
是 读者 对 HelloWorld 工 程 可 能 还 比较 防 生 ， 并 不 知道 每 个 文件 夹 和 文件 是 做 什么 的 ， 也 不 知道 项 
目 是 如 何 启动 的 。 接 下 来 ,我 将 带 大 家 走 进 Cocos2d-JS 的 HelloWorld 志 界 。 
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打开 刚刚 创建 好 的 HelloWorld 工 程 ， 可 以 看 到 其 目录 结构 如 图 2-8 所 示 。 


CMakeLists.txt 
v frameworks 
cocos2d-html5 
COCOS2d-x 
runtime-src 
index.html 


画 国 Y vv 


main.js 
manifest.webapp 
project.json 
> publish 
了 res 
留 HelloWorld.png 
男 loading.js 
了 SrC 
国 app.js 
男 resource.js 


图 2-8 ”HelloWorld 目 录 结 构 
图 2-8 中 有 4 个 一 级 文件 夹 目 录 , 一 个 .html 文 件 、 一 个 .json 文 件 以 及 多 个 .js 脚本 等 。 表 2-1 为 目 
录 结 构 的 详细 介绍 。 


表 2-1 目录 结构 


目录 或 文件 名 内 容 简 介 

CMakeLists.txt Cocos Console 编 译 时 所 依赖 的 文件 

frameworks 包含 Web 引 擎 和 Native 引 擎 

一 cocos2d-html5 Cocos2d-HTML5 游 戏 引擎 

一 cocos2d-x Cocos2d-x 游 戏 引 警 

一 runtime-src 各 平台 的 项 目 工程 文件 ， 包 含 iOS、Mac OS X、Android 以 及 Windows 等 
一 index.html Web 工 程 的 主页 面 ， 其 主要 内 容 和 职责 如 下 。 


口 包含 用 于 显示 游戏 场景 的 canvas 元 素 。 
口 引入 用 于 引擎 初始 化 和 加 载 的 引擎 脚本 : CCBoot.js。 
口 引入 游戏 启动 的 入 口 脚本 : main.js。 
口 包含 一 些 适 配 移动 端 浏览 器 页 面 的 meta 元 素 
一 main.js 游戏 人口 文件 ， 其 中 包含 游戏 初始 化 代码 以 及 启动 代码 
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( 续 ) 
目录 或 文件 名 内 容 简介 
一 manifest.webapp ” 热 更 新 配置 文件 
一 projectjson 工程 配置 文件 
publish 该 目录 初始 状态 下 不 存在 ， 当 工程 以 发 布 模式 打包 后 ,会 创建 该 文件 夹 并 保存 对 应 平台 的 发 布 包 
Runtime 该 目录 初始 状态 下 不 存在 ， 用 来 存储 调试 模式 打包 的 工程 执行 文件 
res 项 目 资源 文件 来， 用 来 存储 所 有 图 片 、 音 频 、 字 体 以 及 动画 等 资源 
一 HelloWorld.png 默认 资源 图 片 
一 loadingjs 浏览 器 上 页 面 启动 的 loading 效 果 
STC 项 目 脚 本 文件 夹 ， 用 来 存储 游戏 的 所 有 JavaScript 代 码 
一 appjs 项 目 代码 


—resource.js 资源 的 全 局 变量 定义 


其 中 ，projectjson 为 项 目 配置 文件 ， 其 内 容 如 下 所 示 : 


于 1 
人 "project type": "javascript", 
3 "debugMode" : 1, 
4 "showFPS" : true, 
5 "frameRate" : 60， 
"noCache" : false, 
6 "id" : "gameCanvas", 
中 "renderMode" : 0， 
8 "engineDir":"frameworks/cocos2d-html5", 
9 "modules" : ["cocos2d"], 
10 "jsList" : [ 
下 "src/resource.js", 
六 "src/app.js" 
13 ] 
1 六 


这 些 属性 影响 着 整个 Cocos2d-JS 项 目 , 一 些 忆 


el 
| 


性 的 背后 更 是 深 藏 功 与 名 。 各 属性 的 意义 如 下 。 


| 


口 project_type: 项 目 类 型 。 

口 debugModae: 表示 程序 的 调试 级 别 ， 默 认 值 是 1， 可 选 值 为 0 到 6。 

m 0: 不 显示 任何 调试 信息 。 

上 1: cc.error、cc.assert、cc.warn、cc.1og 在 调试 终端 中 打印 信息 , 这 是 默认 值 。 

四 2: cc.error、cc.assert、cc.warn 在 调试 终端 中 打印 信息 。 

四 3: cc.error、cc.assert 在 调试 终端 中 打印 信息 。 

上 4: cc.error、cc.assert、cc.warn、cc.10og 在 canvas 上 显示 信息 ， 这 是 Cocos2d- 
HTML5 引 擎 独 有 的 功能 。 这 在 微 信 开发 上 是 一 个 非常 有 用 的 功能 。 

四 5: cc.error、cc.assert、cc.warn 在 canvas 上 显示 信息 ， 这 是 Cocos2d-HTML5 引 


掌 独 有 的 功能 。 
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@ 6: cc.error、cc.assert 在 canvas 上 显示 信息 , 这 是 Cocos2d-HITML5 引 擎 独 有 的 功能 。 
口 showFPS: 若 其 值 为 crue， 则 游戏 窗口 左下 角 会 显示 绘制 函数 调用 次 数 、 演 染 时 间 以 及 
帧 率 。 默 认 取 值 为 true， 项 目 打 包 上 线 时 ， 应 将 其 设置 为 false。 
口 frameRate: 设置 期 望 帧 率 。 游 戏 中 的 实际 帧 率 会 取决 于 游戏 每 帧 消耗 时 间 和 运行 平台 
等 条 件 ， 期 望 帧 率 会 保证 游戏 运行 帧 率 不 会 超过 期 望 帧 率 ， 并 尽力 运行 在 期 望 帧 率 上 。 
口 nocache: 设置 是 否 让 浏览 右 缓 存 html 页 面 。 
口 ia: Web 引 警 页 面 中 canvas 元 素 的 ida， 仅 服务 于 Cocos2d-HTML5 引 警 。 
口 renderMode: 引擎 绘制 模式 ， 仅 服务 于 Cocos2d-HTML5 引 擎 ， 在 Native 上 无 效 ， 其 值 的 
可 取 范 围 为 0~2， 表 示 的 意义 如 下 。 
@ 0: 由 引擎 自动 选择 绘制 模式 ， 遵 循 “ 择 优选 择 ” 的 理念 ， 即 若 文 持 WebGL， 则 优先 考 
虑 使 用 WebGL 绘 制 ， 和 否则 采用 canvas 绘 制 。 

1: 强制 使 用 canvas 绘 制 模式 。 

@ 2: 强制 使 用 WebGL 绘 制 模式 , 但 是 实际 上 WebGL 仍 然 可 能 会 在 一 些 移动 浏览 器 上 被 忽 
略 而 自动 使 用 canvas 绘 制 模式 。 

口 enginepir: Cocos2d-HTML5 引 擎 路 径 ， 仅 在 debug 模 式 下 有 效 ， 保 持 默认 值 即 可 。 如 果 

采用 Cocos2d-JS Lite 版 开发 游戏 ， 则 此 字段 可 以 忽略 。 

口 modaules: 模块 配置 。 可 将 游戏 中 需要 引入 的 模块 添加 到 此 数组 中 ， 例 如 游戏 中 需要 
Chipmunk 物 理 引 擎 支持 ， 则 应 该 在 此 数组 中 添加 chipmunk 字 符 串 。 此 配置 仅 服务 于 
Cocos2d-HTML5 引 擎 ， 当 Cocos Console 在 发 布 模式 下 编译 生成 项 目 时 ， 会 根据 modules 
中 所 包含 的 模块 进行 打包 。 所 以 ，modaules 应 当 保 持 精简 ， 按 需 取 值 ， 避 免 打 出 的 包 中 
引入 了 没有 用 到 的 模块 ， 增 大 了 游戏 脚本 的 大 小 。 关 于 存在 哪些 模块 以 及 每 个 模块 的 定 
义 ， 可 以 参考 ffameworks/cocos2d-html5/modulesConfig. json 文 件 。 

口 jsList: 开发 者 的 JS 脚本 游戏 逻辑 代码 列表 ， 游 戏 中 所 依赖 的 脚本 都 应 该 放 和 人 这 个 列表 
中 。 此 外 , 应当 注意 这 些 JS 文 件 的 相互 依赖 关系 以 及 加 入 的 先后 顺序 。 


2.4 项 目 在 Web 和 Native 上 的 启动 流程 


Cocos2d-JS 是 一 个 跨 浏览 器 和 原生 平台 的 游戏 引 警 ,在 对 应 平台 上 的 启动 流程 自然 也 有 所 不 同 。 
1. Web 


在 Web 上 , index.html 生 成 canvas, 并 加 载 CCBoot.js 文 件 , 然后 CCBoot.js 读 取 project.json 文 件 ， 
从 而 预 加 载 resource.js 以 及 jsList 中 所 有 的 .js 文件 。 到 此 ， 游 戏 中 所 有 的 代码 文件 被 加 载 完 毕 。 随 
后 ,index.html 又 引入 main.js 文 件 , 最 终 main.js 启 动 了 游戏 。 整 个 过 程 的 代码 如 下 ,启动 流 程 图 如 
图 2-9 所 示 : 


1 <body style="padding:0; margin: 0; background: #000;"> 
2 <script src="res/loading.js"></script> 
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3 <canvas id="gameCanvas" width="800" height="450"></canvas> 
4 <script src="frameworks/cocos2d-html5/CCBoot.js"></script> 


5 <script cocos src="main.js"></script> 
2. 读 取 project.json 


. resource.js 
:| 


index.html 1. 加 载 了 | CCBoot.js 


4. 运行 


| 


6. 进入 游戏 


5. 资源 加 载 


cc.LoaderScene .breload () 


图 2-9 ”Cocos2d-JS 游 戏 在 浏览 器 上 的 启动 流程 
2. Native 


在 Native 中 ，Cocos2d-JS 工 程 的 启动 流程 相对 简单 一 些 。 打 开 HelloWorld/frameworks/runtime-src/ 
Classes/AppDelegate.cpp 文 件 ， 可 以 在 AppDelegate 类 的 applicationDidFinishLaunching 


函数 中 看 到 如 下 代码 : 


1 bool AppDelegate::applicationDidFinishLaunching(){ 
2 // 导演 初始 化 
3 auto director = Director::getInstance(); 
4 auto glview = director->getOpenGLView(); 
5 if(!glview) { 

6 #if (CC_TARGET_PLATFORM == CC_PLATFORM WP8) || (CC_TARGET_ PLATFORM == 

CC_PLATFORM_ WINRT) 
glview = cocos2d: :GLViewImpl::create("HelloWorld"); 


Oo ~ 


#else 
9 glview = cocos2d: :GLViewImpl::createWithRect ("HelloWorld", 
Rect (0,0,900,640)); 
#endif 
director->setOpenGLView(glview); 
} 
director->setAnimationInterval(1.0 / 60); // 帧 率 设置 
// 获取 脚本 引擎 (SpiderMonkey) 单 例 对 象 
ScriptingCore* sc = ScriptingCore: :getInstance() : 
sc->addRegisterCallback (register _ all _ cocos2dx); 
sc->addRegisterCallback (register_ cocos2dx_ js_core); 
sc->addRegisterCallback (jsb_register_system); 
ee 
sc->start (); 


OO VOPO 


MD 上 
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2 并 sc->runScript ("script/jsb_boot.js"); // 运行 jsb bootjs 脚 本 

22 人 二 二 多 放 

23 ScriptEngineProtocol *engine = ScriptingCore: :getInstance(); 
24 ScriptEngineManager: :getInstance()->setScriptEngine (engine); 
25 ScriptingCore: :getInstance()->runSscript ("main.js"); 

26 return true; 

2 3} 


在 第 21 行 代码 中 , 脚本 引擎 运行 jsb_bootjs 脚 本 ， 此 脚本 中 同样 读 取 projectjson 配 置 文件 ， 然 
后 在 第 25 行 中 运行 main.js 文 件 ， 从 而 进入 游戏 。 


说 明 Native 妈 为 原生 操作 系统 平台 ,例如 iOS、Android、Mac OS X 等 。 总 之 ， 在 Cocos2d-JS 
中 ， 除 了 浏览 器 外 ， 都 可 以 称 为 Native。 


2.5 项 目 在 各 平台 下 的 打包 以 及 部 署 


在 游戏 开发 的 过 程 中 , 可 能 需要 和 Objective-C 或 者 Java 语 言 交 互 (参见 第 13 章 ), 这 就 需要 你 
在 对 应 的 开发 工具 中 打开 Cocos2d-JS 工 程 。 前 面 我 提 到 过 frameworks/runtime-src 文 件 夹 保存 着 各 
平台 的 工程 文件 ， 接 下 来 就 来 看 看 应 当 如 何 使 用 这 些 工程 文件 。 

1. iOS 和 Mac OS X 

iOS 和 Mac OS X 上 的 工程 文件 用 起 来 比较 简单 ， 在 安装 了 Xcode 的 前 提 下 ， 双 击 打 开 
frameworks/runtime-src/proj.ios_mac/HelloWorld.xcodeproj 文 件 即 可 。 值 得 说 明 的 是 ， 这 个 工程 文 
件 中 集成 了 iOS 和 Mac OS X 项 目 ， 你 可 以 点 击 如 图 2-10 所 示 的 HelloWorld-mobile 按 钮 选择 你 所 要 
的 平台 。 


@O@@Oe@ > | “和 A: Helloworld-mobile 》 目 凌 建 风 的 iPhone 


AO 


图 2-10” iOS 和 Mac OS X 工 程 选择 


忆 已 用 |《 区 HelloWorld 


2. Android 


在 Android 上 , 则 需 将 HelloWorld/frameworks/runtime-src/proj.android 导 入 到 Eclipse 中 , 操作 步 
又 如 图 2-11、 图 2-12 和 图 2-13 所 示 。 
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Oe@e@ 
元 Select an import source: 
上 [4 四 
蕊 ) project Explorer 沦 | 日 各 S| | P ES- General 
| TY EE Android 
es | 
| P [BS:C/C++ 
Show In TRBW Pp > EGit 
Copy | 
Copy Qualified Name 图 2-12 选择 Android 工 程 
祝 Paste BV | 
里 Delete | 
| Root Directory: ~ /Users/Jeff/Desktop/HelloWorld/frameworks/runtime-src/proj.an Browse... 
E23 Export... | aid del hae Bid lal dk dha habe bold 
| Projects: 
多 
到 Refresh Ee Project to Import New Project Name Select All 
Resource Configurations Pp | JUsers/Jeff/Desktop/HelloWorld/framewo... HelloWorld 
中 _Deselect Al 
品 > : 口 全 
图 2-11 导入 工程 图 2-13 ”选择 Android 工 程 路 径 


导入 后 ，HelloWorld 工 程 会 报错 ， 如 图 2-14 所 示 , 这 是 因为 HelloWorld 没 找到 libcocos2dx 库 项 
目 ， 只 需 通过 上 述 步 又 再 将 HelloWorld/frameworks/js-bindings/cocos2d-x/cocos/platformy/android/java 
也 导入 到 Eclipse 中 即 可 ， 完 成 后 的 效果 如 图 2-15 所 示 。 


< 一 < rr 也 
局 project Explorer 多 | 口 至 口 局; Project Explorer 器 | 口 到 口 
Pp EHelloWorld 名 Helloworld 


Pp 强 libcocos2dx 


图 2-14 ”将 HelloWorld 工 程 导 入 Eclipse 图 2-15 ”将 libcocos2dx 库 导入 到 Eclipse 


3. Web 部 署 

根据 读者 的 需求 ，Web 项 目的 部 署 也 可 能 完全 不 同 。 这 里 我 们 以 模拟 局 域 网 为 例 ， 讲 解 如 何 
使 用 XAMPP 在 局 域 网 上 部 署 Cocos2d-JS Web 项 目 ， 这 样 可 以 方便 读者 在 开发 过 程 中 通过 真 机 测试 。 

XAMPP 是 一 款 集成 了 Cross-Platform (X) 、Apache 、MySQL 、PHP 以 及 Perl 的 软件 ， 安 装 完 
之 后 ， 便 可 在 个 人 电脑 上 搭建 服务 器 环境 。XAMPP 是 多 平台 软件 ， 所 以 它 提供 了 Mac OS X、 
Windows、Linux 等 操作 系统 。 其 安装 步骤 较为 简单 ， 下 载 完 安装 包 之 后 ， 直 接 双击 来 打开 它 ， 
然后 一 直 点 击 Next 按 钮 直到 安装 完毕 即 可 。 该 软件 的 下 载 地 址 : https://www.apachefriends.org/ 
download.html。 


XAMPP 在 Mac OS X 和 Windows 中 的 界面 图 分 别 如 图 2-16 和 图 2-17 所 示 。 
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说 明 实际 上 ,在 终端 ( Windows 中 对 应 命令 行程 序 ) 调 用 命令 python -mSimpleHTTPServer， 
也 可 以 直接 快速 搭建 Web 服 务 器 ， 相 关 代 码 如 下 : 


1 cocos new HelloJS -1 js -d ./Desktop 
2 cd ./Desktop/HelloJS/ 
3 python -m SimpleHTTPServer 8080 


其 中 ，8080 为 指定 端口 ， 可 省 略 ， 默 认 值 为 8000。 当 执行 上 面 第 三 行 指令 后 ， 便 可 以 在 
浏览 器 中 通过 http:Wlocalhost:8080/ 地 址 打开 HelloJS 项 目 。 另 外 ， 在 局 域 网 内 ，localhost 可 
用 IP 地 址 代替 。 


As XAMPP 5.6.14-0 


welcome Manage Servers ”Application log 


Welcome to XAMPP 5.6.14-0 


Go To Application 
Follow XAMPP 


ee Open Application Folder 
f Visit Apache Friends 
Get Started 


图 2-16 XAMPP 在 Mac OS X 下 的 界面 图 


国 XAMPP Control Panel v3.2.1 [Compiled: May 7th 2013] Sa 
XAMPP Control Panel v3.2.1 LF] 
Modules 
Service Module PID(s) Port(s) Actions | 
Apache 24440 80,443 | Stop || Admin || Confg || Logs | ， 国 Shel 
MySQL Stat | Admin | Conig | Logs | | (SExplorer | 
Filezilla | Stat | Admin | Confg | | Logs 暴 Semices 
Mercury |_ Stat | Admin | Config || Logs @Hep | 
Tomcat |_ Start | Admin Config || Logs 国 Quit 


6 [main] about ruming this application with administrator rights! ~ 
[main] XANMPP Installation Directory: “c:\xampp\” 

[main] Checking for prerequisites 

[main] All prerequisites found 

[main] Initializing Modules 

[Apache] XANMPP Apache is already rurming on port 80 

[Apache] XAMPP Apache is already rurming on port 443 

[main] Starting Check-Timer 

[main] Control Panel Ready 


图 2-17 XAMPP 在 Windows 下 的 界面 图 
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其 中 ,在 Mac OS X 下 可 以 通过 点 击 Open Application Folder ( Windows 操 作 系 统 中 对 应 
Explorer ) 按钮 ， 打 开 XAMPP 安 装 路 径 。 在 此 目录 中 ， 可 以 看 到 一 个 名 为 htdocs 的 文件 夹 ( 如 
2-18 所 示 ), 将 打包 好 的 Web 项 目 放 在 此 文件 夹 中 , 便 可 在 局 域 网 内 通过 IP 地 址 访问 到 。 当 然 , 这 
需要 先 选中 Manage Servers 面 板 中 的 Apache Web Server 选 项 , 然后 点 击 Start 按 钮 (Windows 下 直接 
点 击 Start 按 钮 即 可 ， 如 图 2-17 所 示 )， 启 动 Apache Web 服 务 器 。 


bin pb apache2 * @ applications.html CMakeLists.txt 

a cgi-bin > bin * @ bitnami.css frameworks p 

团 etc 村 build p cocos2d-x * © index.html 

a htdocs p cgi-bin bp dashboard * 男 main.js 

a logs pb ctlscript.sh 日 favicon.ico manifest.webapp 

图 manager-osx docs 四 硬 Heloword »*| project.json 

局 uninstall error p img 人 publish p 

xamppfiles p etc > 国 index.php res p 

htdocs > webalizer > simulator p 
icons > src > 


图 2-18 htdocs 目录 结构 


我 习惯 把 工作 区 间 设 在 XAMPP/htdocs 路 径 下 ， 如 图 2-18 所 示 。 因 为 这 样 在 启动 Apache Web 
的 情况 下 , 便 可 在 浏览 器 通过 http://localhost/HelloWorld/ 地 址 直接 访问 工程 。 当 然 , 也 可 以 通过 IP 
地 址 的 方式 访问 ， 如 图 2-19 所 示 。 


eee Cocos2d-htmls Hello Wor x \ 


所 C fH | 口 192.168.64.191/Helloworld/ 


> Landscar $ Network 


男 Zoom to fit UA Mozilla 
300 400 


Hello World 


EX 


民 0 Elements Network Sources Timeline Profiles Resources Audits |'Console| 


图 2-19 ”通过 IP 地 址 访问 工程 


另外， 值得 说 明 的 是 ， 当 Web 项 目 打包 之 后 ，HelloWorld 文 件 夹 下 将 出 现 publish 文 件 夹 ， 而 
publish 文 件 夹 义 包含 html5 文 件 夹 ( 如 图 2-20 所 示 )， 此 文件 夹 便 是 发 布 之 后 的 项 目 ， 它 通过 终端 
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命令 cocos compile -pb web -m release 得 到 。 

此 时 读者 可 将 自己 的 移动 设备 开启 WiFi, 保证 和 电脑 在 同一 局 域 网 下 , 然后 在 移动 设备 的 浏 
览 器 上 键入 http://192.168.64.191/HelloWorld/publish/html5/， 也 可 将 此 地 址 通过 网 络 第 三 方 工具 转 
为 二 维 码 ， 然 后 通过 扫描 二 维 码 在 移动 设备 上 访问 HelloWorld 项 目 ， 从 而 起 到 一 个 Web 项 目 部 署 
模拟 的 效果 。 


@ applications.html CMakeLists.txt build.xml 
@ bitnami.css frameworks p 国 game.min.js 
Cocos2d-X > © index.html © index.html 
dashboard > 国 main.js project.json 
favicon.ico manifest.webapp res p 
HelloWorld p> project.json 
img Pp publish bp 
画 index.php res 人 
webalizer simulator 全 
Bb 


sre 


国 Yosemite > 应 用 程序 > XAMPP > xamppfiles > htdocs > HelloWorld > publish > html5 


图 2-20 ”打包 后 的 html5 游 戏 包 


2.6 js-tests 测试 工程 


js-tests 位 于 cocos2d-x/tests/ 文 件 夹 下 , 它 是 Cocos2d-JS 引 警 的 测试 例子 , 也 是 一 个 非常 好 的 学 
习 资 料 ,我 强烈 建议 你 经 常 打开 这 个 工程 看 看 ,多 阅读 它 的 实现 代码 .并且 , 在 实际 开发 中 ,js-tests 
也 是 一 个 非常 好 的 参考 示例 。js-tests 项 目 工程 运行 在 浏览 器 上 的 效果 如 图 2-21 所 示 。 


志 轩 


© 国 cocos2d-HTMLS Test ca= x 


€ CR localhost/cocos2d-x/tests/js-tests/ 立 | 见 三 
| 


响 [0[05z0 司 


ActionManager Test 
Actions Test 
Bake Layer Test 


Box2D Test 


Chipmunk Test 
Click and Move Test 
ClippingNode Test 
CocoStudio Test 
CocosDenshion Test 


图 2-21 js-tests 在 浏览 器 上 的 运行 效果 
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注意 ”1. cocos2d-x/tests/js-tests/index.html 不 可 以 通过 双击 直接 打开 运行 , 它 需 要 放 在 服务 器 上 ， 
即将 cocos2d-x 文 件 夹 放 在 XAMPP/htdocs 路 径 下 ， 然 后 在 浏览 器 中 输入 http://localhost/ 
cocos2d-x/tests/js-tests/index.html， 这 样 才 能 正确 打开 js-tests 工 程 。 
2. 若 在 浏览 器 上 出 现 一 些 奇 奇怪 怪 的 问题 ， 让 读者 百 思 不 得 其 解 ， 可 能 是 浏览 器 缓存 的 
问题 ， 不 妨 考虑 清理 下 浏览 器 缓存 或 在 开发 过 程 中 将 projectjson 文 件 中 的 nocache 值 
设置 为 true。 


2.7 为 《保卫 萝卜 2》 项 目 做 准备 


经 过 前 面 的 学 习 ， 读 者 应 该 对 Cocos2d-JS 有 了 初步 的 了 解 ， 并且 此 时 读者 的 电脑 上 应 该 是 安 
装 好 了 Cocos Console. 那么 从 现在 开始 ， 我 们 将 和 读者 一 起 来 制 我 们 自己 的 《保卫 萝卜 2》, 

1. 《保卫 萝卜 》 简 介 

《保卫 葛 上 下》 是 飞鱼 科技 于 2012 年 7 月 推出 的 一 款 休闲 塔 防 游 戏 , 发 布 后 迅速 蹄 升 至 App Store 
中 国 区 榜首 ,并 被 超过 120 个 国家 推荐 为 热门 游戏 。 其 续 作 《保卫 萝卜 2: 极地 冒险 》 于 2013 年 11 
月 正式 上 线 ， 发 布 当 日 仅 6 小 时 即 登 上 中 国 区 总 榜 第 一 ， 并 持续 位 居 榜 首长 达 21 天 ， 是 一 款 老少 
皆 宜 的 国民 级 休闲 塔 防 手 游 。《 保 卫 萝 卜 》X《 保 卫 萝 卜 2》 总 下 载 量 已 接近 两 亿 ,《 保 卫 萝 卜 3》 由 
腾讯 代理 发 行 ， 将 在 今年 上 线 。 

《保卫 草 卜 2》 游戏 主页 面 、 关 卡 选择 页 面 、 游 戏 玩法 页 面 分 别 如 图 2-22、 图 2-23 和 图 2-24 所 


示 。 若 读者 没有 玩 过 《保卫 萝卜 2》， 我 建议 你 去 App Store 或 Google Play 上 下 载 一 个 ， 然 后 体验 一 
番 ， 这 样 对 本 书 的 学 习 将 会 有 非常 大 的 帮助 。 因 为 我 们 将 《保卫 葛 下 2》 这 个 项 目 贯穿 到 本 书 大 
部 分 章节 中 作为 章节 实例 ， 让 读者 可 以 在 学 习 枯 燥 无 味 的 理论 知识 后 ， 立 马 动 手 做 出 作品 。 

En 一 量 


(© ED 


图 2-22 《保卫 萝卜 2》 游 戏 主页 面 
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DD 
Os dd Baer” | 


图 2-23 《保卫 萝卜 2》 关 卡 选择 页 面 


性 LT ea 本。 
LT 
Xk 42 KEL Se 

J 

图 2-24 《保卫 萝卜 2》 游 戏 玩法 页 面 


说 明 笔者 虽 已 获得 《保卫 荔 卜 》 系 列 素材 官方 授权 ， 但 因 本 书 撰写 时 ,《 保 卫 荔 和 仆 3》 还 未 上 
线 ， 所 以 本 书 暂 用 《保卫 荔 卜 2》 的 素材 。 
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2. 使 用 WebStorm + Chrome 开 发 《保卫 萝 小 2》 


通过 前 面 的 学 习 ， 你 已 经 知道 了 如 何 创 建 、 编 译 、 运 行 Cocos2d-JS 游 戏 了 ， 但是， 你 并 不 晓 
得 通过 何 种 工具 开发 Cocos2d-JS 游 戏 ， 这 里 我 推荐 一 套 方案 一 一 WebStorm + Chrome。 

WebStorm 是 JetBrains 公 司 旗下 一 款 JavaScript 开 发 工具 ， 被 广大 中 国 JavaScript 开 发 者 誉 为 
“Web 前 端 开发 神器 *”“ 最 强大 的 HTML5 编 辑 器 ”“ 最 智能 的 JavaScript IDE” 等 。WebStorm 不 仅 提 
供 了 最 智能 的 代码 补 全 、 代 码 格式 化 以 及 联想 查询 等 高 效 功 能 , 而 且 在 代码 高 亮 着 色 上 也 非常 完 
美 ， 其 下 载 地 址 为 : http://www.jetbrains.com/webstorm/。 

Chrome 是 Google( 谷歌 ) 公 司 于 2008 年 9 月 发 布 的 多 平台 浏览 器 , 它 支 持 Mac OS XX、Windows、 
iOS、Android 以 及 Linux 等 操作 系统 。Chrome 不 仅 调 试 方便 ， 还 提供 了 Mobile Emulation 来 进行 真 
机 模拟 ， 这 对 Cocos2d-JS 游 戏 的 屏幕 适 配 〈 详情 可 参见 第 7 章 ) 等 是 非常 有 帮助 的 。 

当下 载 和 安装 好 WebStorm 和 Chrome 之 后 ， 启 动 终端 ( Windows 下 为 命令 行程 序 )， 通过 如 下 
命令 在 桌面 上 创建 《保卫 萝卜 2》( 这 里 将 其 命名 为 Carrot ) 工程 : 

1 cocos new Carrot -1 js -d ./Desktop 

接着 ， 打 开 安 装 好 的 WebStorm， 点 击 Create New Project， 然 后 选择 Empty Project， 接 着 在 
Location 中 输入 指定 路 径 ， 最 后 点 击 Create 按 钮 ， 如 图 2-25 和 图 2-26 所 示 。 


说 明 虽然 官方 推出 Cocos IDE， 但 是 我 觉得 Cocos IDE 并 不 适合 初学 者 使 用 ， 并 且 本 书 撰写 时 ， 
Cocos IDE 正 在 寻找 新 的 解决 方案 ， 所 以 推荐 WebStorm + Chrome 的 方式 。 若 项 目 以 Native 
为 主 ， 则 可 以 考虑 使 用 WebStorm 或 者 Sublime 编 辑 代 码 ， 然 后 在 Xcode 中 运行 项 目 。 


全 目 Welcome to WebStorm 


人 
Ww 
WebStorm 


Version 10.0.2 


这 Create New Project 
2 Open 
岛 Create New Project from Existing Files 


量 Check out from Version Control 


Register 党 Configure ~ Get Help ~ 


图 2-25 ”WebStorm 主 页 面 


26 第 2 章 ”Hello World 


@ 目 Welcome to WebStorm 


二 Empty Project 


New project 
日 HTML5 Boilerplate 人 
《》 Web Starter Kit Location: | /Applications/XAMPP/htdocs/Cocos2d-jS | EE 


¢ Create 
图 2-26 创建 工程 


然后 把 刚才 创建 好 的 Carrot 项 目 复制 到 XAMPP/htdocs/Cocos2d-JS 文 件 夹 下 ， 此 时 回 到 
WebStorm 编 辑 嚣 ， 右 击 Cocos2d-JS， 选 择 Synchronize 'Cocos2d-JS' 刷 新 目录 ， 如 图 2-27 所 示 ， 刷 
新 后 便 可 看 到 Carrot 的 目录 结构 了 ， 如 图 2-28 所 示 。 


96@ 
回 Cocos2d-Js 》 
BB Project = 图 地 | 执 - |- 
4 
vY DCarrot 
@Q@ Pp Dframeworks 
DD cocoszd-Js 》 » Dres 
i Bi 加 " i 
Cocos2d-JS (Am pp 


日 CMakeLists.txt 


ibrari New Pp 
大 External Librarie 国 index.html 
| Local History 莘 mainjs 


(7 Synchronize 'Cocos2d-)S' 目 manifest.webapp 
及 projectjson 


Create Gist... 
@ 出 External Libraries 


图 2-27 ”刷新 Cocos2d-JS 目 录 图 2-28 ”Carrot 目 录 结 构 


此 时 ， 你 可 以 右 击 index.html， 然 后 选择 Debug 'index.html'， 如 图 2-29 所 示 ， 从 而 让 Carrot 运 
行 在 浏览 器 上 。 


v DCarrot 
p Dframeworks 
> 站 res 
> 四 src 
Eo .CocoOs-project.json 
目 cMakeLists.txt 
回 index.html 


E main.js New 
目 manifest.webapp | 局 Create 'index.html'... 
Bm project.json P Run 'index.html' 个 仓 R 


到 | External Libraries Debug 'index.html' 


© Open in Browser 


图 Create Gist... 


图 2-29 ”选择 Debug index.html 
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不 幸 的 是 ， 当 你 点 击 Debug 'index.html' 之 后 ，Chrome 浏 览 器 并 没有 反应 ， 这 是 因为 你 还 需要 
为 Chrome 安 装 一 个 名 为 JetBrains IDE Support 的 扩展 程序 ( 插件 )。Chrome 搬 件 的 安装 步骤 如 下 。 


(1) 打开 Chrome 浏 览 器 ， 点 击 如 图 2-30 中 箭头 所 指 的 沫 单 按钮 。 
(2) 选择 “更 多 工具 ”一 “扩展 程序 "。 


(3) 点 击 底部 “获取 更 多 扩展 程序 ” 超 文 本 链接 ， 进 入 Chrome 扩 展 程序 商店 ， 然 后 搜索 安装 
JetBrains IDE Support 插 件 。 知 搜索 失败 ， 可 在 Chrome 打 开 扩 展 程序 面板 的 情况 下 ， 将 随 书 资源 
中 的 JetBrains IDE_Support 2.0.8_0.crx 文 件 拖 到 Chrome 浏 览 句 中 直接 安装 。 


/各 扩展 程序 x \® a 


C 会 ,|| chrome://extensions By 


图 2-30 ”点击 Chrome 菜 单 


安装 成 功 后 如 图 2-31 所 示 。 此 时 ,再 点 击 Debug 'index.html', 便 可 在 浏览 器 中 看 到 Carrot 项 目 
的 运行 效果 。 当 然 ， 此 时 你 看 到 的 仅仅 只 是 一 个 HelloWorld 的 图 片 。 不 要 急 , 在 下 一 章 的 实例 中 ， 
我 们 将 带 你 开发 《保卫 葛 上 下 2》 的 主页 面 ， 如 图 2-22 所 示 。 


上 JB JetBrains IDE Support é 2.0.8 回 已 启用 侣 
HTML/CSS/JavaScript editing and JavaScript debugging using JetBrains IDEs. 
权限 ”选项 ”详细 信息 
ID: hmhgeddbohgjknpmjagkdomcpobmlli 
检查 视图 : ”背景 页 (iframe) 背景 页 


四 在 隐身 模式 下 启 


会 ”获取 更 多 扩展 程序 键盘 快捷 键 


图 2-31 ”JetBrains IDE Support 插 件 


2.8 ”实例 一 一 利用 Cocos DevTools 学 习 Cocos2d-JS 


Cocos DevTools 是 Cocos2d-x 团 队 于 2015 年 2 月 26 日 推出 的 一 个 浏览 器 工具 ， 可 谓 是 神器 ， 其 
下 载 地 址 为 : http://h5.cocos.com/static/cocos-devtools/index.html。 

Cocos DevTools 工 具 的 安装 极其 简单 ， 只 需 设 置 浏览 器 显示 书签 栏 ， 然 后 根据 提示 将 按钮 拖 
归 到 书签 栏 中 即 可 。 安 装 完 成 后 , 在 浏览 右 的 书签 栏 中 出 现 Cocos DevTools v1.0 则 表示 安装 成 功 ， 
如 图 2-32 所 示 。 
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oe@e Cocos DevTools x a 志 轩 
€ Ch h5.cocos.com/static/cocos-devtools/index.html 六 | 见 三 
国 cocos2d-Js | | Cocos Devtools v1.0 国 其 他 书签 


CoCcos 
DevToois 


Html5 游 戏 调试 神器 全 新 出 炉 ! 


请 拖 搜 此 按钮 到 书签 栏 ! 


然后 在 标签 栏 点 击 "Cocos DevTools". 


图 2-32 ”Cocos DevTools 工 具 


安装 好 Cocos DevTools 工 具 之 后 ， 在 浏览 器 上 运行 一 个 Cocos2d-JS 项 目 。 例 如 ， 打 开 js-tests 
工程 ,然后 点 击 书签 栏 中 的 Cocos DevTools 工 具 ， 此 时 会 出 现 如 图 2-33 左 下 角 所 示 的 选项 卡 面板 ， 
其 中 包含 场景 元 素 和 性 能 调试 这 两 个 选项 卡 。 在 场景 元 素 中 , 你 可 以 选中 想 要 的 元 素 ， 从 而 对 它 
进行 编程 。 例 如 在 图 2-33 中 ， 我 选中 了 ActionManager Test 元 素 ， 并 将 光标 聚焦 在 地 址 栏 中 ， 再 通 


过 option + command + 本 (Windows 按 Ctrl + Shift + J 键 ) 组 合 键 打开 浏览 器 的 Console( 控制 台 )， 
最 后 在 Console 中 进行 编码 。 图 2-33 中 Console 的 代码 如 下 : 


1 var node = _cocos_ devtools.curr; 
2 Var moveBy = cc.moveBy(2, cc.p(-200, 0)); 
3 node.runAction (moveBy); 


第 1 行 代码 表示 获取 当前 Cocos DevTools 工 具 所 选中 的 元 素 ， 第 2 行 代码 创建 了 一 个 动作 ( 参 
见 第 4 章 )， 第 3 行 代码 运行 这 个 动作 。 或 许 这 些 代码 你 现在 看 不 太 懂 ,但 是 并 没有 关系 ， 因 为 这 
里 抛 出 Cocos DevTools 工 具 ， 只 是 希望 你 在 阅读 本 书 的 时 候 ， 能 够 合理 、 高 效 地 利用 此 工具 。 
为 它 能 在 很 大 程度 上 帮助 你 学 习 Cocos2d-JS 引 警 ， 即 在 你 阅读 本 书 的 相关 知识 点 时 ， 可 以 立马 通 
过 此 工具 结合 浏览 器 Console 进 行 实践 ， 从 而 降低 了 学 习 成 本 ， 提 高 了 学 习 效 率 。 

当然 ， 我 相信 你 已 经 感受 到 了 ，Cocos DevTools 工 具 并 非 只 是 一 个 帮助 学 习 的 工具 ， 它 在 项 
目的 实际 开发 中 是 一 个 非常 强大 的 助手 。 例 如 ， 当 游戏 里 有 非常 多 的 元 素 时 ， 你 很 难 通过 代码 将 
想 要 的 元 素 获 取出 来 ， 但 是 通过 Cocos DevTools 工 具 ， 则 容易 许多 ， 而 这 一 般 用 在 修复 bug 等 方 
面 上 。 
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息 具 四 | 国 cocos2d-HTMLS TestCas x 者 时 
€ CA localhost/cocos2d-x/tests/js-tests/ ir JB 三 
国 cocos2d-Js Cocos Devtools v1.0 闻 其 他 书签 

= 民 口 Elements Network |'Console |> x 


四 二 © <topframe> v Preserve log 


> var node = _cocos_devtoots,curr 


undefined 
> var moveBy = cc.moveBy(2, cc.p(-200, 0)); 
undefined 


node. runAction(moveBy); 


ActionManager Test ee a ,L235 pee Bse, 
Actions Test ?| 


Bake Layer Test 
Box2D Test 


Chipmunk Test 
Click and Move Test 
ClippingNode Test 
CocoStudio Test 
CocosDenshion Test 


从 检察 元 素 ”9 刷新 列表 


v LayerGradient 
v _itemMenu:Menu enabled: 
ty 255 
label:LabelTTF 
四 人 opacityModifyRGB: 
国 MenuTtem et 
a MenuItem or: | 
p MenuItem cascadeColor 
上 MenuTtem 远 ann 


图 2-33 ”使 用 Cocos DevTools 工 具 学 习 Cocos2d-JS 


2.9 小 结 


通过 本 章 ， 我 们 知道 了 Cocos2d-JS 项 目的 目录 结构 ， 了 解 每 个 文件 夹 和 文件 的 作用 ， 并 且 顺 
手 搭建 好 了 开发 环境 ， 掌 握 了 Cocos2d-JS 工 程 的 创建 、 编 译 、 和 运行、 打包 等 技能 。 此 外 ， 还 学 到 
了 通过 WebStorm + Chrome 的 方式 开发 Cocos2d-JS 游 戏 ， 并 且 掌 握 了 如 何 使 用 Cocos DevTools 工 
有 具 。 最 后 ， 创 建 了 Carrot (《 保 卫 葛 卜 2》) 的 项 目 工程 。 无 奈 笔 者 有 点 调皮 且 霸 道 ， 因 为 你 并 未 在 
Carrot 中 看 到 任何 和 《保卫 萝卜 2》 有 关 的 东西 。 


2.10 ”参考 资源 
本 章 的 参考 资源 如 下 。 


口 Cocos Console: i ea. 
口 Cocos2d-JS 项 目 结构 介绍 : http://www.cocos2d-x.org/docs/manual/framework/cocos2d-js/4- 


essential- concepts/4-1-cocos2d-js-project/en。 


核心 框 染 


在 我 看 来 ， 游 戏 就 像 是 一 部 可 以 实时 交互 的 电影 ， 玩 家 怎么 操作 ， 这 部 电影 就 怎么 演 。 一 部 
电影 ， 我 们 时 常 关注 这 部 电影 的 明星 阵容 ， 还 有 它 的 导演 。 在 Cocos2d-JS 中 ， 同 样 也 存在 着 这 些 
角色 。 本 章 将 围绕 Cocos2d-JS 游 戏 引 擎 的 “明星 阵容 ”展开 ， 讲 解 这 些 角色 的 作用 以 及 职责 ， 它 
们 是 Cocos2d-JS 游 戏 引 擎 最 核心 、 最 基础 的 部 分 。 

本 章 内 容 : 

口 导演 (cc.Director) 

口 Cocos2d-JS 坐 标 系 

口 节点 〈cc .Nodae ) 

口 场景 (cc .scene ) 

口 层 (cc.Layer ) 

口 精灵 (cc.sprite) 

口 场景 树 

口 标签 

口 实例 一 一 《保卫 更 下 2》 主页 面 开发 


3.1 导演 


在 Cocos2d-JS 中 ， 导演 (cc.Director ) 拥有 至 高 无 上 的 地 位 。 如 果 把 游戏 比 作 一 稻 船 ， 那 
么 cc .Director 就 是 这 艘 船 的 船长 ， 它 把 控 着 整个 游戏 的 运转 和 方向 。 例 如 ， 在 游戏 启动 前 ， 
它 负责 设置 游戏 的 运行 环境 ; 在 游戏 运行 的 过 程 中 , 它 把 控 着 整个 游戏 的 主 循 环 的 间作 
切换 等 工作 。cc .Director 是 一 个 单 例 类 ，cc .qdirector 是 cc .Director 的 单 例 对 象 ， 这 意味 
着 你 可 以 在 任何 地 方 通过 cc .girector 得 到 导演 对 象 ,或 许 现在 我 们 可 以 跟随 着 cc .airector， 
看 看 从 游戏 启动 之 前 到 游戏 运行 的 整个 过 程 中 ，cc .qirector 都 做 了 哪些 事情 。 
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3.1.1 设置 帧 率 


帧 率 是 用 于 测量 显示 帧 数 的 量度 ， 其 单位 为 “每 秒 显 示 帧 数 ”( Frame per Second，FPS )。 一 
般 情况 下 ， 电 影 以 24fps 播 放 ， 而 在 游戏 中 如 果 帧 率 低 于 30fps 的 话 ， 游 戏 就 会 显得 卡 顿 不 连贯 。 
在 Cocos2d-JS 中 ， 帧 率 默 认为 60fps。 若 想 修 改 默 认 帧 率 ， 可 以 直接 修改 工程 下 projectjson 文 件 中 
frameRate 的 值 。 

在 游戏 运行 中 ，cc .Director 也 提供 了 动态 操作 帧 率 的 API， 你 可 以 调用 cc .director. 
setAnimationInterval (fps) 方 法 来 更 改 帧 率 。 需 要 注意 的 是 , 这 里 的 参数 fps 是 帧 率 的 倒数 ， 
表示 游戏 每 秒 绘制 多 少 次 ， 示 例 代 码 如 下 : 


1 cc.director.setAnimationInterval(1.0 / 60); 


说 明 一般 情况 下 ， 不 建议 修改 引擎 的 帧 率 ， 但 在 某 些 特定 的 情况 下 ， 例 如 UI 场 景 ， 你 可 以 动 
态 更 改 帧 率 ， 将 帧 率 设置 到 30fps 到 40fps 之 间 ， 使 得 游戏 性 能 开销 更 少 的 同时 又 不 会 造成 
太 大 的 影响 。 


3.1.2 ”初始 化 管理 器 


导演 好 比 一 稻 船 的 船长 ， 是 整个 游戏 的 统筹 。 既 然 是 统筹 , 很 多 事情 都 不 可 能 亲 力 亲 为 。 很 
显然 ， 它 需要 一 些 帮手 来 分 担 它 的 任务 。 这 些 帮 手 就 是 调度 器 、 动 作 管理 器 和 事件 管理 器 。 这 些 
管理 器 ， 对 应 管理 着 自己 的 领域 ， 它 们 都 在 cc.Director 的 init () 方 法 中 被 初始 化 ， 相 关 代码 
如 下 : 


1 cc.Director = cc.Class.extend(t{ 

2 init: function () { 

3 YF 

4 this._ scheduler = new cc.Scheduler (); // 创建 [调度 器 ] 

5 if(cc.ActionManager){ 

6 this. actionManager = new cc.ActionManager(); // 创建 [动作 管理 器 ] 

7 this. scheduler.scheduleUpdate(this. actionManager, 

cc.Scheduler .PRIORITY SYSTEM, false); 

8 }elsel{ 

9 this. actionManager = null; 

10 } 

11 this. eventAfterDraw = new cc.EventCustom(cc.Director.EVENT AFTER DRAW); 
// 创建 [事件 管理 器 ] 

2 this. eventAfterDraw.setUserData (this); 

Re this. eventAfterVvisit = new cc.EventCustom(cc.Director.EVENT AFTER 
VISIT); 

14 this. eventAfterVvisit.setUserData(this); 

15 this. eventAfterUpdate = new cc.EventCustom(cc.Director.EVENT AFTER 
UPDATE); 

16 this. eventAfterUpdate.setUserData(this); 

V6 fh a 


18 return true; 


3.1.3 ”初始 化 演 染 器 


演 染 器 用 于 将 图 片 或 者 3D 模 型 素材 绘制 到 屏幕 上 。 因 为 Cocos2d-JS 是 一 个 跨 全 平台 的 游戏 引 
擎 ， 使 用 它 开发 出 来 的 游戏 可 以 运行 在 浏览 器 和 本 地 上 ， 所以， 在 各 平台 上 采用 的 泻 染 器 也 是 不 
一 样 的 。 


在 HTML5 中 ,iOS 人 默认 采用 WebGL 泻 染 ， 其 他 浏览 器 采用 canvas 
绘制 ， 例 如 Android 手 机 上 的 浏览 


在 Native 上 ， 全 部 采用 OpenGL ES 2.0 泻 染 。 


3.1.4 获取 屏幕 大 小 


在 游戏 开发 中 , 时 常 需要 获取 当前 屏幕 的 大 小 , 然后 参考 屏幕 的 大 小 将 游戏 中 的 可 视 对 象 定 
位 在 屏幕 上 。cc.Director 提 供 了 几 种 不 同 概念 的 屏幕 大 小 ， 相 关 代 人 码 如 下 : 


1 cc.Director = cc.Class.extend(t{ 

2 getWinSize: function () { 

3 return cc.size(this. winSizeInPoints); 

4 起 

3 getWinSizeInPixels: function () { 

6 return cc.size(this. winSizeInPoints.width * this. contentScaleFactor， 
this. winSizeInPoints.height * this. contentScaleFactor); 

可 js 

8 getvisibleSize: null, 

9 getVisibleorigin: null, 

王 由 7 


其 中 winsize 表 示 实 际 画布 的 大 小 ，visipblesize 表 示 可 视 区 域 的 大 小 ， 所 以 ，visiblesize 
总 是 小 于 或 者 等 于 winsize。 值 得 注意 的 是 ，visiblesize 和 visibleorigin 是 为 Native 服 务 
的 ， 仅 在 JSB 上 上 有效。 另外， 在 CCBootjs 中 实现 了 这 样 一 行 代 码 ; 


1 cc.winSize = cc.director.getWinSize(); 
因此 ， 你 可 以 通过 cc .winsize 的 方式 快速 屏幕 的 大 小 。 屏幕 大 小 相关 的 内 容 ， 详 
见 第 7 章 。 


3.1.5 ”执行 游戏 主 循环 


当 游 戏 的 底层 环境 设置 好 之 后 ， 游 戏 就 可 以 以 设 定好 的 帧 率 ( 默认 为 60fps ) 进入 主 循环 了 。 
cc.Director 定 义 了 一 个 mainLoop 方 法 ， 该 方法 控制 着 整个 游戏 的 主 循环 。 你 可 以 在 
CCDirectorjs 中 看 到 这 样 一 段 代码 : 
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1 cc.Director = cc.Class.extend({ 

2 mainLoop: function () { 

3 if (this. purgeDirectorInNextLoop) { 
4 this. purgeDirectorInNextLoop = false; 
5 this.purgeDirector(); 

6 } 

else if (!this.invalid) { 

8 this.drawScene (); 

9 } 

0 } 

Ty 


首先 ，cc .Director 会 去 检查 下 一 帧 是 否 需 要 清除 自身 , 一 般 在 调用 cc .director.end() 
时 被 触发 ， 这 将 清理 和 退出 正在 运行 的 场景 ,并 且 取 消 所 有 的 调度 器 ， 删 除 所 有 的 事件 监听 器 ， 
停止 所 有 的 动画 以 及 清空 缓存 数据 。 

然后 ， 开 始 绘 制 场景 ，Cocos2d-JS 首 先 会 去 计算 增 量 时 间 ， 即 上 一 帧 到 现在 所 花 的 时 间 。 理 
论 上 ， 它 的 值 总 是 大 于 或 等 于 游戏 设 定 的 帧 率 的 倒数 。 所 以 ， 增 量 时 间 越 大 ， 游 戏 越 显 得 卡 顿 。 
当 增 量 时 间 大 于 一 定 值 的 时 候 ， 游 戏 开始 出 现 明显 的 掉 帧 现象 。 

接着 ，cc.Director 开 始 执行 调度 器 中 所 被 要 求 执行 的 任务 。 例 如 ,《 飞 机 大 战 》 游 戏 中 的 
飞机 每 隔 0.5s 发 射 子弹 ， 若 游戏 以 60fps 来 绘制 ， 它 大 概 是 每 隔 30 帧 创建 一 颗 子 弹出 来 。 若 当前 帧 
与 上 一 次 发 射 子弹 刚好 间隔 了 30 帧 ， 那 这 一 次 的 子弹 就 会 在 当前 帧 被 创建 出 来 。 

在 执行 调度 器 中 的 任务 之 后 ，cc .Director 通 过 事件 管理 器 触发 cc .director.EVENT_ 
AFTER_UPDATE 事 件 ， 然 后 Cocos2d-JS 开 始 检查 是 否 有 用 户 交互 事件 触发 ， 例 如 触摸 事件 、 鼠 标 
实现 、 键 盘 事件 、 重 力 感 应 事件 以 及 自 定义 事件 ， 若 有 ， 则 分 发 和 处 理 这 些 事件 。 

事件 分 发 完毕 之 后 ,， 泻 染 器 把 整个 屏幕 都 清空 掉 ， 这 是 非常 合理 的 。 因 为 当 泻 染 器 清空 完 屏 
幕 之 后 ， 导 演 开 始 判断 是 否 有 场景 需要 切换 ， 若 有 ， 则 切换 到 下 一 个 场景 ， 若 没有 ， 则 遍历 当前 
场景 中 的 节点 并 更 新 节点 的 空间 转换 矩阵 等 信息 ， 然 后 发 送 绘制 指令 给 泻 染 器 。 接 着 ， 
cc.Director 触 发 cc.dqirector.EVENT_AFTER_VISIT 事 件 , 并且 会 把 所 有 的 子 节点 按照 层级 
从 小 到 大 进行 排序 ， 排 完 序 之 后 ， 所 有 子 节点 的 visit () 方 法 将 被 触发 。 也 正 是 在 这 个 方法 中 ， 
节点 被 绘制 出 来 。 


节点 绘制 完毕 后 ，cc .Director 触 发 cc .director.EVENT_AFTER_DRAW 事 件 ， 最 终 更 新 
当前 帧 率 。 


3.2 ”Cocos2d-JS 坐标 系 


泻 染 咒 泻 染 游戏 对 象 时 ， 需 要 获取 游戏 对 象 的 位 置 。 你 应 该 知道 ， 位 置 的 概念 都 是 相对 的 ， 
它 依赖 于 参照 物 ， 而 在 Cocos2d-JS 中 这 个 参照 物 就 是 坐标 系 。 


在 手机 移动 应 用 中 ， 坐 标 系 通常 分 为 两 种 一 一 屏幕 坐标 系 和 OpenGL 坐 标 系 。 传 统 的 原生 应 
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用 采用 的 是 屏幕 坐标 ， 即 以 屏幕 的 左上 和 角 为 原点 ， 向 右 表 示 X 轴 的 正方 向 ， 向 下 表示 Y 轴 的 正方 
向 ， 这 不 管 是 在 iOS、Android 还 是 Windows Phone 中 ， 都 是 一 样 的 。 


然而 ，Cocos2d-JS 并 不 是 采用 屏幕 坐标 系 ， 而 是 选择 了 和 OpenGL 保 持 一 致 ， 即 以 屏幕 的 左 
下 角 为 原点 ， 向 右 表 示 X 轴 的 正方 向 ， 向 上 表示 Y 轴 的 正方 向 。 标 准 屏幕 坐标 系 和 Cocos2d-JS 游 
戏 引 擎 坐标 系 分 别 如 图 3-1 和 图 3-2 所 示 。 


2 SS A ss 
过 HB ® SN / 相 


(0, 0) (640, 0) (0, 1136) 


(0, 1136) (0, 0) (640, 0) 
\ ( 


图 3-1 标准 屏幕 坐标 系 图 3-2 Cocos 引 擎 坐标 系 


是 


另外 ，cc.Director 提 供 了 屏幕 坐标 和 OpenGL 坐 标 二 者 之 间 互 相 转 换 的 方法 ， 如 下 : 


1 convertToGL function (uiPoint) // 转换 [UI 坐 标 为 OpenGL/WebGL 坐 标 ] 
2 convertToUI function (glPoint) // 转换 [OpenGL/WebGL 坐 标 为 UI 坐 标 ] 


除 此 之 外 ，Cocos2d-JS 中 还 有 世界 坐标 系 和 本 地 坐标 系 的 概念 ， 详 情 可 参见 3.3 节 。 


3.3 节点 


你 已 经 知道 ， 在 游戏 主 循环 中 ，Cocos2d-JS 会 去 遍历 当前 场景 中 的 所 有 节点 ， 那 节点 到 底 是 
什么 东西 呢 ? 


节点 ， 是 一 个 代词 ， 它 是 一 个 抽象 概念 类 ， 在 Cocos2d-JS 中 为 cc .Node 类 。 也 就 是 说 ， 所 有 
cc.Node 类 及 其 子 类 , 都 可 以 归 称 为 节点 。cc .Node 本 身 没 有 可 视 化 表示 形式 , 但 凡是 能 被 绘制 ， 
或 者 能 包含 其 他 节点 的 东西 都 是 节点 ,例如 下 面 马 上 要 讲 到 的 场景 ( cc . Scene )、 层 ( cc .Layer )、 
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精灵 (cc .sprite ) 等 。 所 有 的 节点 都 继承 自 cc .Node， cc.Node 定 义 了 所 有 市 点 共有 的 属性 和 
方法 。 


3.3.1 基础 属性 


我 将 节点 的 位 置 、 大 小 、 锁 点、 层级、 标签、 名字 归 为 基础 属性 ， 这 是 因为 在 日 常 开 发 中 ， | 
它们 是 最 常用 的 。 


是 节点 最 基础 的 属性 ， 默 认为 cc.p(0，0) ， 大 部 分 的 节点 我 们 都 需要 给 它 设 置 一 个 位 
置 。 它 的 相关 API 如 表 3-1 所 示 。 


表 3-1 位 置 相关 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
x SetPositionX (PosX) Number 设置 节点 的 X 轴 坐标 
getPositionx() Number 获取 节点 的 X 轴 坐标 
y SetPositiony (posY) Number 设置 节点 的 Y 轴 坐标 
getPositiony() Number 获取 节点 的 Y 轴 坐标 
_position setPosition (newPosOrxValue, yValue) cc.p(x, y) 或 Number 设置 节点 的 坐标 
getPosition() Number 获取 节点 的 坐标 


说 明 属性 前 面 带 有 下 划 线 (_) 的 , 均 表 示 私 有 属性 , 子 类 不 可 访问 ,例如 cc.Nodqe 的 _position 
属性 。 


假设 你 现在 需要 将 游戏 中 某 个 节点 的 位 置 设置 为 (100, 86)， 并 且 获 取出 它 的 坐标 ， 有 具体 的 实 
现代 码 如 下 : 


1 node.x = 100 // 设置 [X 轴 坐标 ] 
2 node.y = 86 // 设置 [Y 轴 坐标 ] 
3 var posX = node.x; // 获取 [X 轴 坐标 ] 
4 var posY = node.y; // 获取 [Y 轴 坐标 ] 


上 面 的 代码 是 通过 直接 操作 属性 的 方式 实现 的 ， 这 也 可 以 通过 函数 的 方式 来 实现 : 


node.setPositionx 


并 (100); // 设置 [X 轴 坐标 ] 
2 node.setPositionY(86); 

3 Ge 
4 


// 设置 [Y 轴 坐标 ] 
// 获取 [X 轴 坐标 ] 


node.getPositionx 


node.getPositionY(); // 获取 [Y 轴 坐标 ] 
此 外 ， 你 还 可 以 通过 下 面 的 方式 达到 同样 的 目的 : 
1 node.setPosition(100, 86); // 设置 [坐标 ] 
2 node.setPosition(cc.p(100, 86)); // 设置 [坐标 ] 


3 node.getPosition(); // 获取 [坐标 ]， 返 回 {cc.p} 类 型 
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你 会 发 现 ，Cocos2d-JS 提 供 了 两 种 操作 属性 的 方式 ， 第 一 种 是 直接 通过 属性 风格 操作 属性 ， 
第 二 种 是 通过 函数 调用 。 虽 然 通 过 属性 操作 的 方式 更 加 简便 ， 但 是 属性 风格 的 实现 用 到 
ECMAScript 的 getter 和 setter 的 特性 ， 这 两 个 特性 在 部 分 浏览 器 上 面 的 效率 要 低 于 方法 ， 所 以 在 对 
性 能 要 求 比较 高 的 地 方 还 是 建议 使 用 方法 进行 访问 。 


说 明 cc.dqefineGetterSetter (ptoto,prop,getter,setter) 函数 实现 了 ECMAScript 的 
getter 和 setter 特 性 ， 你 可 以 在 cocos2d-x/cocos/scripting/js-bindings/script/jsb_boot.js ( Native 
实现 ) 或 cocos2d-x/web/cocos2d/core/platform/CCClass.js( Web 实 现 ) 中 看 到 它 的 实现 。 


2. 大 小 


在 开发 中 , 你 可 能 需要 设置 或 获取 节点 的 大 小 ,例如 在 做 碰撞 检测 的 时 候 。 关 于 节点 大 小 的 
相关 API 如 表 3-2 所 示 。 


表 3-2 节点 大 小 的 相关 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
_contentSize setContentSize(size, height) Number 设置 节点 的 内 容 大 小 
getContentsize() cc.size() 数 据 结构 获取 节点 的 内 容 大 小 


你 还 可 以 通过 属性 的 方式 快速 访问 节点 的 大 小 值 ， 就 像 下 面 那 样 : 


1 node.width = 100; // 设置 [节点 的 宽度 ] 
2 node.height = 200; // 设置 [节点 的 高 度 ] 
3 var width = node.width; // 获取 [节点 的 宽度 ] 
4 var height = node.height; // 获取 [节点 的 高 度 ] 


值得 注意 的 是 , 这 里 设置 的 内 容 大 小 并 不 会 改变 节点 的 视觉 效果 , 它 只 是 一 个 属性 ,一 般 也 
被 用 到 触摸 事件 中 《〈 见 第 5 章 )。 


说 明 cocos2d-x/web/cocos2d/core/base-nodes/BaseNodesPropertyDefine.js 实 现 了 节点 的 属性 访问 
方式 ,例如 node .height 的 实现 如 下 : 
1 var _p = cc.Node.prototype; 
2 _p.height; 
3 cc.defineGetterSetter(_p, "height", _p._getHeight, _p._setHeight); 


除 此 之 外 ， 其 他 类 的 属性 方式 也 是 这 样 实现 的 ， 读 者 可 自行 阅读 源码 。 


3. 锚 点 


现在 你 已 经 知道 了 节点 有 位 置 和 大 小 属性 , 此 时 可 以 将 某 个 节点 想象 为 一 张 白 纸 , 它 的 坐标 


就 是 cc .p (100，86)， 大 小 为 cc .size (125，80)。 这 个 时 候 ， 我 让 你 把 这 张 白 纸 根据 它 的 坐 
标 将 它 钉 在 屏幕 的 某 个 位 置 , 你 会 怎么 做 呢 ? 我 想 你 可 能 无 从 下 手 , 因为 你 不 确定 把 这 张 白 纸 的 


哪个 位 置 钉 在 屏幕 上 。 


其 实 , 这 和 白 纸 的 锚 点 是 有 关系 的 。 那 么 锚 点 是 什么 呢 ? 锚 点 ， 它 是 一 个 百分比 系数 ， 其 取 
值 范 围 为 [0, 0] 到 [1, 1]， 边 界 包含 0 和 1。 每 种 类 型 的 节点 都 会 有 自己 的 默认 值 ， 例 如 cc .Nogde 类 
的 默认 节点 为 cc.p(0，0) ， 表 示 节 点 的 左下 角 定 位 在 屏幕 上 你 所 设 定 的 位 置 。 所 以 ， 位 置 和 锚 
点 这 两 个 属性 共同 决定 了 节点 在 屏幕 中 的 摆 放 位 置 。 通 过 下 列 代码 可 以 设置 和 获取 锚 点 : 


1 node.setAnchorpoint (0.5, 0.5); // 设置 [ 锚 点 ] 
2 var anchor = node.getAnchorpoint () // 获取 [ 锚 点 ] ， 返 回 {cc.p} 类 型 


上 面 的 第 1 行 代码 将 白 纸 的 锚 点 设置 为 (0.5, 0.3), 这 可 以 非常 清楚 地 得 出 将 白 纸 的 中 心 点 钉 在 
屏幕 上 ， 但 是 ， 倘 若 我 们 将 白 纸 的 锚 点 设置 为 (0.3, 0.2)， 那 么 纸张 定位 在 屏幕 上 的 定位 点 〈 称 为 
原点 ) 应 该 这 么 算 : 

X 轴 坐标 : 节点 宽度 x 锚 点 X 值 

Y 轴 坐标 : 节点 高 度 x 锚 点 y 值 

因此 ,得 出 此 时 白 纸 的 原点 是 cc .p (125 * 0.3，80 * 0.2)。 当 然 , 你 也 可 以 通过 cc.Nodae 
的 getAnchorPointInPoints() 也 数 直接 获取 原点 。 

除 此 之 外 ， 锚 点 还 决定 节点 变换 操作 ， 例 如 旋转 和 缩放 等 。 因 为 动作 ( 见 第 4 章 ) 是 基于 变 
换 操 作 的 ， 所 以 锚 点 也 是 动作 运转 的 围绕 点 。 图 3-3 和 图 3-4 中 的 节点 都 被 旋转 了 -30?， 不 同 的 是 
它们 的 销 点 分 别 是 cc.p(0.5，0.5) 和 cc.p(0，0)。 


图 3-3” 锚 点 为 cc.p(0.5,0.5) ， 旋 转 -30。 图 3-4” 销 点 为 cc .p (0,0)， 旋 转 -30° 

4. 层级 

若 当 前 游戏 中 只 有 一 个 节点 ,， 演 染 器 可 以 直接 对 此 节点 进行 绘制 。 但 是 ， 倘 知 游戏 中 有 两 个 
以 上 的 节点 需要 绘制 , 那么 泻 染 器 可 能 会 不 知 所 措 了 , 因为 它 并 不 知道 要 将 哪个 节点 绘制 在 屏幕 
的 最 上 方 ， 哪 个 节点 绘制 在 屏幕 的 最 下 方 。 所 以 ,每 个 节点 都 会 有 一 个 层级 属性 ,用 来 告诉 泻 染 
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器 节点 的 绘制 顺序 。 


层级 又 分 为 全 局 层级 和 本 地 层级 两 种 ， 全 局 层级 用 globalzorder 表 示 ， 本 地 层级 用 
localZzorder 表 示 ， 全 局 层级 的 绘制 优先 级 高 于 本 地 层级 。 获 取 和 设置 层级 的 相关 API 如 表 3-3 
所 示 。 


表 3-3 ”获取 和 设置 层级 的 相关 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
zIndex setLocalzOrder (localzZOrder) Number 设置 节点 的 本 地 层级 
getLocalZOrder () Number 获取 节点 的 本 地 层级 
_globalZOrder setGlobalzZzOrder (globalzZOrder) Number 设置 节点 的 全 局 层级 
getGlobalzOrder () Number 获取 节点 的 全 局 层级 


一 般 情 况 下 ， 层 级 保持 默认 值 即 可 。 在 开发 中 ,能 少 用 层级 的 就 尽量 少 用 层级 ， 免 得 节点 层 
级 关系 乱七八糟 的 ,给 自己 带 来 麻烦 。 若 在 一 些 非 用 层级 不 可 的 地 方 ,那么 建议 定义 一 个 类 似 枚 
举 的 层级 对 象 ， 像 下 面 这 样 : 


1 var NodeZorder =NodeZoraer || {}; 

2 NodeZorder.HERO = 100; // 角色 对 象 层级 

3 NodeZorder.ROLE = 200; // 角色 对 象 层级 

Me A A 

5 this.addCchild (node, NodeZorder.HERO); // 将 节点 添加 到 当前 层 中 
5. 标签 


在 游戏 中 可 能 同时 存在 好 多 个 节点 ， 你 可 以 为 每 个 节点 都 贴 上 一 个 标签 ， 方 便 区 分 它们 。 
cc.Node 提 供 了 一 个 叫 tag 的 属性 , 默认 值 为 -1, 是 Number 类 型 。 你 可 以 通过 如 表 3-4 所 示 的 API 
设置 和 获取 节点 的 Eag 值 。 


表 3-4 设置 和 获取 节点 tag 值 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
setTag (tag) Number 设置 节点 的 标签 
tC 
59 getTag() Number 获取 节点 的 标签 


注意 cc.Node 的 tag 值 必须 为 整 型 ， 否则 在 JSB 上 会 报错 ,这 是 因为 Cocos2d-x API 设 计 的 就 是 
整 型 的 。 


6. 名 字 

或 许 你 已 经 意识 到 了 ， 用 tag 标 记 节 点 的 方式 可 能 不 能 完全 满足 开发 需求 。 因 为 tag 为 整 型 
类 型 ,虽然 我 们 可 以 通过 定义 常量 的 方式 将 taog 值 中 转 一 下 ,但 是 车 tag 值 相等 的 话 ， 节 点 依旧 
无 法 根据 tag 值 区 分 ， 就 像 下 面 这 样 : 
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1 MAN = 1; 

2 WOMAN = 1; 

3 var man = new cc.Node(); // 创建 [节点 ] 

4 man.setTag (MAN); // 设置 [tag 属 性 ] 
5 var woMan = new cc.Node(); // 创建 [节点 ] 

6 woMan.setTag (WOMAN); // 设置 [tag 属 性 ] 


所 以 ，Cocos2d-JS 也 为 节点 设计 了 name 属 性 ， 它 是 字符 串 类 型 的 。 你 可 以 通过 表 3-5 所 示 的 
API 设 置 和 获取 它 。 


表 3-5 name 属性 对 应 的 方法 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
name setName (name) String 设置 节点 的 名 字 
getName () String 获取 节点 的 名 字 


3.3.2 图形 属性 

除了 基础 属性 之 外 ，Cocos2d-JS 还 为 cc. Node 提供 了 一 些 和 图 形 相关 的 属性 ， 这 些 属性 直接 
影响 每 个 节点 的 图 形 效 果 , 下面 我 尝试 着 将 这 些 和 图 形 相关 的 属性 提取 出 来 并 概要 介绍 一 下 它们 。 

1. 旋转 

引 敬 为 节点 设计 了 rotation 属 性 来 控制 节点 的 旋转 角度 ， 其 默认 值 为 0， 它 是 Numpber 类 型 
的 。 另 外 , 值得 说 明 的 是 ， 在 Cocos2d-JS 的 坐标 系 中 ,垂直 X 轴 向 上 表示 0*， 垂直 Y 轴 向 右 为 90°， 
rotation 的 值 为 正 数 表 示 顺 时 针 旋 转 ， 负 数 表示 道 时 针 旋 转 。 表 3-6 列 出 了 旋转 相关 的 属性 。 


贞 


表 3-6 ”旋转 相关 的 属性 


和 对 应 方法 参数 或 返回 类 型 说 明 
rotation setRotation (angle) Number 设置 节点 的 旋转 角度 
getRotation() Number 获取 节点 的 旋转 角度 
rotationx setRotationx (angle) Number 设置 节点 X 轴 的 旋转 角度 
getRotationx() Number 获取 节点 X 轴 的 旋转 角度 
TotationyY setRotationY (angle) Number 设置 节点 Y 轴 的 旋转 角度 
getRotationy() Number 获取 节点 Y 轴 的 旋转 角度 
2. 缩放 


和 旋转 类 似 ， 你 可 以 通过 节点 的 scale 属 性 来 控制 节点 泻 染 时 的 缩放 比例 ， 即 视觉 上 节点 的 
大 小 。 它 的 取 值 范围 是 R〈 全 体 实数 )， 默 认 值 为 1。 设 置 为 负数 的 话 ， 引 擎 将 会 反 向 泻 染 显示 。 
例如 要 水 平 翻转 ， 只 需要 调用 setscalex(-1) 即 可 。 表 3-7 列 出 了 缩放 相关 的 属性 。 
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表 3-7 ”缩放 相关 的 属性 
属 性 对 应 方法 参数 或 返回 类 型 说 明 
setScale (radio) Number 设置 节点 的 缩放 倍数 
By getscale!) Number 获取 节点 的 缩放 倍数 
于 setScalex (radio) Number 设置 节点 X 轴 的 缩放 倍数 
D4 
Ee getscalex() Number 获取 节点 X 轴 的 缩放 倍数 
y setScaleY (radio) Number 设置 节点 Y 轴 的 缩放 倍数 
下 
i getScaleY () Number 获取 节点 Y 轴 的 缩放 倍数 


3. 倾斜 


加 


除了 旋转 和 缩放 之 外 ,引擎 还 提供 skew 属 性 来 控制 节点 的 倾斜 度 ， 


对 应 的 API 如 表 3-8 所 示 。 


表 3-8 ”skew 属 性 对 应 的 API 
属 性 对 应 方法 参数 或 返回 类 型 说 明 

setSkewxX (skew) Number 设置 节点 的 X 轴 倾斜 度 

KewX 
SOW get Skewx () Number 获取 节点 的 X 轴 倾斜 度 
setSkewY (skew) Number 设置 节点 的 Y 轴 倾斜 度 

kewY 
SA getSkewY () Number 获取 节点 的 Y 轴 倾斜 度 

4. 可 见 性 


有 的 时 候 , 你 可 能 需要 将 节点 隐藏 起 来 ,使 其 不 可 见 。 节 点 的 visible 
点 对 象 是 否 可 见 的 ， 当 visible 值 为 false 时 ,引擎 将 不 会 对 该 节点 进行 演 染 。visible 


应 的 API 如 表 3-9 所 示 。 


局 性 就 是 用 来 控制 节 
属性 对 


表 3-9 visible 属性 对 应 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 ” 明 

pe setVisible(isVisible) Boolean 设置 节点 是 否 可 见 
ble isVisible() Boolean 获取 节点 是 否 可 见 
5. 不 透明 


在 游戏 内 部 需要 实现 一 些 半 透 明 效 果 ， 


节点 的 opacity 属 性 就 是 为 此 设计 的 。 它 的 取 值 区 间 
是 [0, 255]，0 表 示 全 透明 ，255 表 示 完 全 不 透明 。 男 外 ，cascadeOpacity 属 性 可 以 控制 opacity 
是 否 进 行 子 节 点 关联 ,使 opacity 值 也 作用 于 其 子 节 点 上 。opacity 属 性 对 应 的 API 如 表 3-10 所 示 。 


表 3-10 ”opacity 属性 对 应 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
opacity setOpacity (opacity) Number 设置 不 透明 度 
getOpacity (opacity) Number 获取 不 透明 度 
cascadeOpacity setCascadeOpacity (isCascadeOpacity) Boolean 设置 是 否 级 联 不 透明 度 
isCascadeOpacity () Boolean 获取 是 否 级 联 不 透明 度 


注意 ”和 设置 可 见 性 不 同 ， 设 置 节点 透明 度 为 0 后 ， 节 点 虽然 看 不 到 了 ， 但 这 只 是 进行 透明 度 混 
合 运 算 的 结果 ， 引 擎 还 是 会 泻 染 该 节点 。 


6. 颜色 


节点 的 color 属 性 可 以 设置 节点 显示 的 颜色 ， 参 数 为 cc .color 对 象 。cc .color 接 收 一 个 
RGB 人 参数， 表示 红 (R)、 绿 (G)、 蓝 (B) 三 个 颜色 通道 , 例如 cc .color(255,100,200)， 
个 通道 的 取 值 区 间 是 [0, 255]。 


cascadeColor 属 性 表示 是 否 进行 子 节 ， 点 关联 ， 即 是 否 使 当前 节点 的 颜色 值 也 作用 到 其 子 节 
点 上 。opacityModifyRGB 属 性 用 于 指定 颜色 值 是 否 要 跟着 不 透明 度 进行 改变 。 颜色 相关 的 属性 
对 应 的 API 如 表 3-11 所 示 。 


表 3-11 颜色 相关 的 属性 对 应 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
color setColor (color) EC COLOr 设置 节点 的 颜色 
getColor() CEREELGL 获取 节点 的 颜色 
cascadeColor setCascadeColor (b) Boolean 设置 是 否 级 联 颜色 值 
isCascadeColor () Boolean 获取 是 否 级 联 kh 颜色 值 
opacityModifyRGB setOpacityModifyRGB(b) Boolean 设置 颜色 是 否 跟随 不 透明 度 进行 改变 
isOpacityModifyRGB () Boolean 获取 颜色 是 否 跟随 不 透明 度 进行 改变 


7. 泻 宣 染 程序 


在 游戏 里 面 有 的 时 候 需 要 用 到 一 些 演 染 特效 ， 这 些 特效 通常 是 一 些 shader ( 着 色 髓 ) 程序 ， 
节点 的 shaderProgram 属 性 就 是 因此 而 生 的 ， 相 关 的 API 如 表 3-12 所 示 。 


表 3-12” ”shaderProgram 属 性 相关 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
shaderProgram setShaderProgram (sp) CC .GLProgram 设置 节点 的 着 色 器 程序 
getShaderProgram() CC .GLProgram 获取 节点 的 着 色 器 程序 


3.3.3 ”其 他 属性 
除了 以 上 属性 之 外 ，Cocos2d-JS 还 为 cc .Node 提 供 了 其 他 属性 ， 比 如 父 / 子 节点 相关 的 属性 、 

running 属 性 、actionManager 属 性 、arrivalorgder 属 性 等 。 
节点 相关 


引擎 中 层 ( Layer ) 通常 包含 其 他 的 节点 ， 同 时 层 又 添加 到 场景 ( Scene ) 里 面 ， 这 样 它们 便 
有 了 父子 关系 ， 场 景 是 层 的 父 节点 ， 其 他 添加 到 层 里 面 的 节点 就 是 层 的 子 节点 。 节 点 的 parent 


42 第 3 章 核心 框架 


= 


盟 性 表示 的 就 是 该 节点 的 父 节 点 对 象 ， 而 childaren 属 性 表示 的 是 当前 节点 的 所 有 子 节点 的 一 个 
集合 ，chilarencount 属 性 表示 当前 节点 拥有 的 子 节点 数量 。 相 关 的 API 如 表 3-13 所 示 。 


表 3-13” 父 / 子 节点 相关 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
parent SetParent (parentNode) cc.Node 设置 父 节 点 对 象 
getParent () cc.Node 获取 父 节 点 对 象 

children getChildren () Array 获取 所 有 子 节 点 对 象 集合 
childrenCount getChildrenCount () Number 获取 子 节 点 数量 


注意 childqren 必 性 和 childqrenCount 属 性 是 只 读 属性 ,节点 的 子 节点 只 能 通过 aaqqchild() 
方法 添加 ， 在 添加 的 同时 childrenCount 属 性 会 自动 计数 。 


二 


点 的 running 属 性 用 于 判断 该 节点 是 否 处 于 运行 状态 。 当 节点 的 生命 周期 进入 onEnter 
时 ，running 的 值 为 true; 当 节 点 的 生命 周期 进入 onExit 时 ，running 的 值 为 false。running 
属性 对 应 的 API 如 表 3-14 所 示 。 


表 3-14 running 属性 对 应 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 上 明 
running isRunning () Boolean 判断 节点 是 否 处 于 运行 状态 


3. 动作 管理 器 
每 个 节点 都 会 有 一 个 动作 管理 需 来 管理 节点 的 动作 ， actionManager 属 性 表示 的 就 是 当前 
节点 的 动作 管理 器 对 象 ， 对 应 的 API 如 表 3-15 所 示 。 


表 3-15 actionManager 属 性 对 应 的 API 


属 性 对 应 方法 参数 或 返回 类 型 说 明 
actionManager setActionManager (am) cc.ActionManager 设置 节点 的 动作 管理 BA 
getActionManager () cc.ActionManager 获取 节点 的 动作 管理 BA 


4. 到 达 顺 序 
引擎 在 绘制 节点 对 象 的 时 候 会 根据 层级 进行 排序 ， 但 是 有 的 节点 的 层级 是 相同 的 ， 而 


= 


arrivalorder 属 性 就 是 用 来 对 层级 相同 的 节点 进行 排序 的 。arrivalorder 值 越 小 的 节点 将 被 
引擎 优先 渲染 。 该 属性 属于 引 警 内 部 使 用 ， 不 建议 修改 ， 对 应 的 API 如 表 3-16 所 示 。 
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表 3-16 arrivalorder 属 性 对 应 的 API 


属 性 对 应 方法 


参数 或 返回 类 型 说 明 


arrivalOrder setOrderOfArrival (order) 


getOrderOfArrival () 


3.3.4 ”常用 函数 


介绍 完 cc .Node 的 属性 之 后 , 一 起 来 看 看 cc .Noae 的 常用 函数 ， 这 里 我 依旧 将 它们 按 功 能 进 


行 了 分 类 。 
1. 属性 配置 
cc.Node 提 供 了 attr() 函数 供 开 发 者 快速 配置 
1 node.attr(t{ 
2 x : 200, // 设置 [节点 的 X 轴 坐标 ] 
3 y : 300, // 设置 [节点 的 Y 轴 坐标 ] 
4 scale : 1.5, // 设置 [节点 的 缩放 比例 ] 
5 rotation : 45 // 设置 [节点 的 旋转 角度 ] 
GD 六 


2. 节点 操作 


Number 设置 节点 的 到 达 顺 序 
获取 节点 的 到 达 顺 序 


Number 


上 


辕 性 ， 像 下面 那样 使 用 : 


操作 闻 点 的 大 概 有 “ 增 、 删 、 改 、 查 ”4 个 大 功能 ， 下 面 简要 介绍 这 4 个 功能 。 


了 
@ 增 


当 创建 好 一 个 节点 之 后 ， 你 可 以 把 它 添加 到 父 节 点 中 ， 添 加 子 节点 的 API 如 下 : 


1 addchild(child, localZOrder, tag) 


child 为 子 节 点 是 毫 无 疑问 的 ，localzordader 和 tag 表 示 本 地 层级 和 标签 ， 


这 在 前 面 已 经 说 


过 了 。 不 过 ， 还 需要 说 明 的 是 ，1ocalzorder 的 默认 值 为 0%，tag 的 默认 值 为 -1， 并 且 它 们 都 可 


以 省 略 。 
@ 证 


CC 


parent.removeChild(child, cleanup); 
parent .removeChildByTag (tag, cleanup); 
parent.removeAllChildren (cleanup); 
node.removeFromParent (cleanup); 


ODP 


.Node 提 供 了 4 个 删除 节点 的 相关 API， 具 体 如 下 : 


// 删除 [ 子 节点 ] 

// 根据 tag 删 除 [ 子 节点 ] 
// 删除 [所 有 子 节点 ] 

// 子 节 点 自己 从 父 节 点 删除 


这 4 个 API 的 cleanup 人 参数 都 是 布尔 值 ， 表示 是 否 清除 节点 中 所 有 的 动作 以 及 回调 函数 ,默认 


值 为 true y 也 可 省 略 。 
@ 改 


这 里 的 改 ， 实 际 上 是 重新 对 节点 的 arrivalorder 和 1ocalzorder 进 行 赋值 。 与 node. 
setLocalZOrder (localzOrgder) 函数 不 同 的 是 ， 它 对 arrivalorder 属 性 也 重新 赋值 了 。 所 
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以 ,理论 上 若 你 想 对 节点 赋予 一 个 新 的 演 染 顺序 ， 通 过 下 面 的 方法 会 更 好 一 些 。 当 然 ， 你 得 保证 


父 节 点 


1 
e@ 
记 
市 点 中 


1 
2 


除 


3. 
通 
般 用 在 
历 这 个 


1 
2 


人 


器 ODP 


9 


内 
直接 访 


可 能 市 


大 让 人 
人 


Darent 中 有 chilgd 这 个 子 节 点 : 
parent .reorderChild(child, zOrder) 
查 
得 在 前 面 提 到 过 ，cc .Nogde 为 节点 设置 了 tag 和 name 属 性 ,通过 这 两 个 属性 , 便 可 以 在 父 
找到 想 要 的 子 节点 ， 相 关 API 如 下 : 


node.getChildByTag (tag) 
node.getChildByName (name) 


此 之 外 ，cc .Node 还 提供 了 返回 子 节点 数组 以 及 子 节 点 个 数 的 API， 如 下 : 
node.getCchildren(); // 获取 所 有 子 节 点 ， 返 回 一 个 数组 
node.getChildrenCount () ; // 获取 子 节 点 个 数 

暂停 和 恢复 


过 cc .Node 的 pause() > ) 函数 ， 可 以 暂停 和 恢复 节点 的 动作 以 及 调度 嚣 ， 这 一 
暂停 游戏 和 恢复 游戏 的 功能 上 。 你 可 以 把 需要 暂停 和 恢复 的 节点 放 在 一 个 数组 中 ,然后 遍 
数组 ， 再 调用 数组 中 节点 ) 或 esume () 图 数 即 可 ， 相 关 API 如 下 : 


node.pause(); // [暂停 ] 节点 的 动作 以 及 调度 器 
node.resume(); // [恢复 ] 节点 的 动作 以 及 调度 器 


动作 操作 
一 个 节点 都 可 以 运行 动作 (参见 第 4 章 )，cc .Node 提 供 了 如 下 和 动作 相关 的 API: 


node.runAction(action); // 运行 指定 动作 

node.stopAction(action); // 停止 指定 动作 

node.stopAllActions(); // 停止 所 有 动作 

node.stopActionByTag (99); // 根据 动作 的 tag 值 停止 动作 

var action = node.getActionByTag (99); // 根据 tag 值 在 动作 列表 中 取出 动作 


内 存 管理 
存 管理 ,一 直 是 程序 员 口 中 的 热门 话题 。 在 C++ 中 ， 动 态 地 分 配 内 存 可 谓 是 一 把 双 刃 剑 ， 
问 内 存 地 址 的 方式 提高 了 程序 的 性 能 , 但 是 比较 遗憾 的 是 , 每 次 手动 分 配 和 释放 内 存 ， 都 
来 没有 正确 分 配 和 释放 内 存 所 造成 的 一 系列 问题 , 例如 时 指针、 重复 释放 、 内 存 泄漏 等 重 
头疼 的 问题 。 


们 尝试 着 用 不 同 的 解决 方案 去 避免 这 个 问题 ， 比 较 常 见 的 有 智能 指针 、 自 动 垃 字 报 回收 等 


而 Cocos 游 戏 引 擎 采用 的 内 存 管 理 方式 就 是 自动 垃圾 回收 的 方式 。 注 意 ， 这 里 是 自动 回收 ， 这 意 


味 着 你 


并 不 需要 自己 手动 管理 对 象 的 内 存 。 


Cocos 引 擎 采用 的 内 存 管理 机 制 实 际 上 来 源 于 Mac OS X 10.7 与 OS 5 中 引入 的 一 项 新 技术 一 一 


ARC， 
理 大 概 


中 文 译 为 自动 引用 计数 ， 是 Automatic Reference Counting 的 缩写 。ARC 在 Cocos2d-x 中 的 原 
是 这 样 的 : 
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“在 Cocos2d-x 中 ， 个 对 象 都 有 一 个 _referencecount 属 性 ， 该 对 象 被 引用 时 ， 
_referenceCount 会 执行 +1 操 作 ， 例 如 调用 node .adqchild (chi1ld) 图 数 。 当 对 象 被 释放 时 ， 
_referenceCount 会 执行 -1 操作 ,例如 调用 node .removechilid (chilg) 也 数 。 在 每 一 帧 绘制 
完成 后 ， 对 象 回收 池 (AutoreleasePool ) 会 去 检查 回收 池 中 所 有 对 象 的 _referenceCount 
值 ， 当 对 象 的 _referencecount 值 为 0 时 ， 对 象 回收 池 便 会 回收 释放 的 内 存 。 

虽然 Cocos 引 擎 提供 了 自动 内 存 回收 的 机 制 ， 但 是 你 仍然 可 以 通过 如 下 API 管 理 内 存 。 当 然 ， 
它们 仅 在 JSB 中 有 效 ， 并 且 在 使 用 它们 的 时 候 ， 你 必须 明白 自己 在 做 什么 ， 否 则 会 照 成 内 存 泄 露 
等 严重 问题 : 


1 node.retain(); // 使 节点 的 引用 计数 (_referenceCount) 加 1 
2 node.release(); // 使 节点 的 引用 计数 (_referenceCount) 减 1 


6. 调度 器 

在 开发 中 ， 你 可 能 需要 游戏 每 隔 一 段 时间 做 某 一 件 事情 ， 比 如 每 隔 0.1s 发 射 一 颗 子弹 ， 这 样 
的 需求 就 需要 调度 器 来 实现 。cc .Node 为 调度 器 提供 了 相关 的 API， 你 可 以 通过 如 下 代码 开启 默 
认 调 度 表 : 


1 node.scheduleUpdate(); 

2 node.update = function(dt)t{ 

3 cc.1og(" 每 一 帧 前 会 执行 ， 每 一 帧 时 间 间 隔 为 : " ,dt); 
4 ) 


需要 注意 的 是 ， 当 一 个 节点 调用 了 schedquleUpdqate () 函数 之 后 ， 你 必须 重 写 此 节点 的 
update (dt) 图 数 。 在 updaate(at) 中 ，dt 参 数 表 示 时 间 间 隔 ， 一 般 为 每 一 帧 的 时 间 。 你 可 以 用 
它 做 一 个 计时 器 ， 在 帧 率 为 60fps 的 情况 下 ， 执 行 了 60 次 的 update 函 数 ， 就 是 1 秒 了 。 

此 外 ， 你 还 可 以 通过 schedule 函 数 启 动 一 个 自 定义 调度 器 ， 其 API 如 下 : 

1 node.schedule(callback, interval, repeat, delay, key) 

其 中 ，callback 为 调度 器 的 回调 也 数 ， 是 function 类 型 。interval、repeat 和 delay 分 
别 表示 时 间 间 隔 、 重 复 次 数 、 延 时 多 少 秒 开始 执行 ， 它 们 都 是 Number 类 型 。 而 key 为 String 类 
型 ， 是 调度 器 的 唯一 标识 符 。 除 了 callback 外 ， 其 余 参 数 都 是 可 省 略 的 ， 这 说 明 它 们 都 有 一 个 
默认 值 。interval 的 默认 值 为 0， 若 省 略 它 ， 应 该 考虑 使 用 默认 的 update (at) 调 度 器 。repeat 
的 默认 值 为 cc .REPEAT_FOREVER， 是 一 个 正 无 穷 的 数 ， 表 示 无 限 循 环 。delay 的 默认 值 也 为 0， 
下 面 举 个 使 用 schedule 也 数 启动 的 调度 器 例子 : 


1 callback = function()t{ 

2 Cc.10g(" 自 定义 定时 器 .. .每 陪 0.2s 执 行 一 次 ..."); 

中 

4 node.schedule(callback, 0.2); 

cc .Node 还 提供 了 只 调度 一 次 的 调度 器 , 其 参数 和 用 法 都 与 schedule 函 数 一 致 , 其 API 如 下 : 


1 node.scheduleOnce(callback, delay, key) 


除 此 之 外 ，cc .Nodae 拥 有 两 个 外 载 调度 需 的 函数 ， 一 个 是 卸载 指定 调度 器 ， 一 个 是 番 载 所 有 
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调度 器 ， 对 应 API 如 下 : 


1 node.unschedule(callback); // 趣 载 callback 调 度 器 ，callback 即 调度 器 回调 函数 
2 node.unscheduleAllCallbacks(); // 却 载 node 节 点 所 有 的 调度 器 


7. 坐标 转换 

前 面 提 到 过 ，Cocos2d-JS 中 有 本 地 坐标 和 世界 坐标 的 概念 ， 本 地 坐标 指 的 是 以 父 节 点 的 左下 
角 为 原点 的 坐标 参考 系 ， 而 世界 坐标 以 标准 的 Cocos2d-JS 坐 标 系 作为 参考 系 。 例 如 ， 当 前 游戏 中 
有 Node_A 和 Node_B 两 个 精灵 节点 ( 因为 精灵 节点 的 默认 锚 点 是 cc.p(0.5,0.5), 所 以 精灵 节点 
的 原点 在 其 自身 的 正中 心 ， 见 3.6 节 )， 它 们 的 大 小 都 是 cc .size (200,200)，Node B 是 Node A 
的 子 节 点 。Node A 的 坐标 为 cc .p (200,200) ，Node B 的 坐标 为 cc .p (100,100)， 那 么 它们 在 
游戏 中 的 坐标 位 置 如 图 3-5 所 示 。 


坐标 : cc.pb(200,200) 
坐标 : cc.p(300,300) 


未 : CC.p(200,200 
未 : CC.p(200,200 


) 
) 


0 100 200 300 400 500 600 700 
| | | x | | 


图 3-5 ”本 地 坐标 和 世界 坐标 


cc.Node 提 供 了 本 地 坐标 和 世界 坐标 转换 的 相关 代码 ， 具 体 如 下 : 
// 本 标 坐 标 转 为 世界 坐标 


Var toWorldPos = nodeParent.convertToWorldSpace (node.getPosition()); 

// 本 地 坐标 转 为 世界 坐标 ( 受 锚 点 影响 ) 

Var toWorldPosAR = nodeParent .convertToWorldSpaceAR (node.getPosition()); 
// 世界 坐标 转 为 本 地 坐标 

Var toNodePos = node A.convertToNodeSpace (node_B); 

// 世界 坐标 转 为 本 地 坐标 ( 受 锚 点 影响 ) 


Var toNodePosAR = node_A.convertToNodeSpaceAR (node_B); 


OAURODP 
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8. 边框 区 域 
cc.Node 提 供 了 两 个 和 边框 区 域 有 关 的 API， 具 体 如 下 : 


// 返回 节点 的 本 地 坐标 系 的 外 边框 
// 返回 节点 的 世界 坐标 系 的 边框 

它们 的 返回 值 都 是 一 个 cc .rect (x,y,width,height) 的 数据 结构 ， 其 中 x、 vy 分 别 表 示 节 
点 的 X 轴 和 Y 轴 的 坐标 ，widath 和 height 表 示 节 点 的 宽度 和 高 度 。 


1 node.getBoundingBox(); 
2 node.getBoundingBoxToWorld(); 


3.4 场景 


我 总 是 喜欢 把 游戏 和 电影 联想 起 来 ， 因 为 游戏 的 开发 和 电影 的 制作 是 那么 相似 。 当 然 ， 我 更 
喜欢 把 Cocos2d-JS 游 戏 和 京剧 联想 起 来 ， 因 为 你 会 发 现 ，Cocos2d-JS 游 戏 的 组 织 结构 和 京剧 几乎 
一 样 ， 就 比如 Cocos2d-JS 中 的 cc .scene， 它 就 对 应 着 京剧 中 的 舞台 ， 供 演员 们 表演 。 舞 台 一 次 
展示 一 个 ,场景 也 只 能 一 次 运行 一 个 ， 所 以 ， 在 Cocos2d-JS 游 戏 中 ， 至 少 存 在 一 个 场景 供 游戏 运 
作 。 先 来 看 下 cc .Scene 的 构造 函数 ， 具 体 如 下 : 


1 cc.Scene =cc.Node.extend({ 

2 _className:"Scene", 

3 ctor:function () { 

4 cc.Node.prototype.ctor.call(this); // 调用 [ 父 类 构造 函数 ] 
5 this. ignoreAnchorPointForPosition =true; // 设置 [忽略 锚 点 ] 

6 this.setAnchorPoint(0.5，0.5); // 设置 [ 锚 点 ] 

7 this.setContentSize(cc.director.getWinSize()); // 设置 [大 小 ] 

8 } 

9 


从 上 面 的 代码 不 难 发 现 ， 场景 ( cc .scene ) 类 十 分 简单 ， 它 只 是 作为 层 (cc .Layer )( 见 
3.5 节 ) 的 容器 。 从 第 5 行 代码 可 以 看 到 ， 场 景 有 忽略 锚 点 属性 ， 默 认 值 为 Erue。 虽 然 在 第 6 行 代 
码 中 ， 错 点 被 设置 为 (0.5, 0.5)， 但 是 这 已 经 没什么 用 了 ， 因 为 锚 点 已 经 被 忽略 了 。 通 常情 况 下 ， 
你 不 应 该 去 更 改 场 景 的 锚 点 和 忽略 锚 点 的 值 ， 它 只 是 提供 给 引 敬 自己 使 用 的 。 


在 实际 开发 中 ,你 应 该 学 会 根据 功能 设计 场景 。 例 如 ,游戏 主页 面 、 关 卡 选择 页 面 、 游 戏 玩 
法 页 面 、 设 置 页 面 、 游 戏 结束 页 面 等 都 设计 成 一 个 场景 ， 页 面 的 切换 实际 上 就 是 场景 的 切换 。 


3.4.1 再 探 导演 场景 管理 
作为 层 的 容器 ， 场 景 可 以 添加 层 ， 但 是 不 能 再 添加 场景 。 场 景 与 场景 的 切换 ， 只 能 通过 


cc.Director 来 实现 。 使 用 cc.Director 管 理 场景 的 相关 方法 如 下 ;， 


1 cc.Director = cc.Class.extend({ 

2 getRunningScene : function(); // 获取 [正在 运行 的 场景 ] 
3 runScene : function(scene); // 运行 [指定 场景 ] 

4 pushScene : function(scene); // 压 入 [指定 场景 ] 

5 popScene : function(); // 弹出 [顶部 场景 ] 

6 popToRootScene : function(); // 弹出 [到 根 场 景 ] 


7 popToSceneStackLevel : function(level); // 弹出 [到 指定 栈 级 场景 ] 
) 


cc.Director 提 供 了 一 个 getRunningScene() 方 法 , 这 让 你 在 任何 地 方 都 可 以 获取 到 当前 
正在 运行 的 场景 。 
再 者 ， 你 会 发 现 ，cc.Director 只 提供 了 一 种 方法 从 一 个 场景 切换 到 另 一 个 场景 ， 这 和 
Cocos2d-x 显 得 有 些 出 人 了 。Cocos2d-x 首 次 运行 场景 用 runwithSscene () ， 场 景 和 场景 之 间 的 切 
换 通 过 replacescene () 方 法 替换 ， 而 Cocos2d-JS 废 弃 了 runwithscene() 和 replaceScene () 
方法 ， 简 化 了 场景 的 管理 ， 所 有 场景 之 间 的 切换 都 采用 runscene () 方 法 。 


另外 ，cc.Director 还 提供 场景 栈 来 管理 场景 ， 如 图 3-6 所 示 。 


图 3-6 场景 栈 


通常 情况 下 ，pushscene 用 来 压 人 一 些 占用 内 存 比 较 小 的 场景 。 这 是 因为 bushscene 会 终 
止 当前 正在 运行 的 场景 ， 并且 把 它 放 人 到 场景 栈 当 中 去 ,将 它 “ 冷 藏 ”起 来 ， 然 后 才 运 行 新 的 场 
景 ， 当 前 的 场景 并 没有 被 释放 掉 。 因 此 ,一 般 应 该 选择 压 人 游戏 设置 等 这 一 类 占用 内 存 较 小 的 场 
景 ， 但 如 果 你 压 和 人 的 场景 所 使 用 的 内 存 过 大 ， 则 可 能 引起 设备 内 存 不 足 ，Cocos2d-JS 发 现 内 存 不 
足 ， 则 会 释放 被 “冷藏 ”起 来 的 场景 中 所 用 到 的 资源 所 占 的 内 存 ， 这 将 造成 不 可 控制 的 危害 。 

pop 相 关 操作 场景 的 方法 大 同 小 异 , 都 是 将 经 过 pushscene 的 场景 从 堆栈 ( 内 存 ) 中 pop 出 来 
执行 ， 但 前 提 是 堆栈 内 存 中 存在 此 场景 ， 而 当前 执行 的 场景 将 被 删除 。 


3.4.2 ”切换 特效 


场景 之 间 的 切换 ，Cocos2d-JS 提 供 了 大 几 十 种 的 过 渡 效 果 ， 例 如 四 方 推 入 、 淡 入 淡出 等 ， 示 
例如 下 : 

1 // 四 方 推 入 

2 ccdirector.runScene(new cc.TransitionMoveInL (time, scene)); // [从 左 往 右 ] 推 入 

3 ccdirector.runScene(new cc.TransitionMoveInR (time, scene)); // [从 右 往 左 ] 推 入 
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4 ccdirector.runScene(new cc.TransitionMoveInT(time, scene)); // [从 下 往 上 ] 推 入 
5 ccdirector.runScene(new cc.TransitionMoveInB (time, scene)); // [从 上 人 往 下 ] 推 入 
6 // 痰 入 淡出 

7 ccdirector.runScene(new cc.TransitionFade (time,scene)); 


其 中 ， 参 数 time 是 过 渡 时 长 ，scene 为 目标 场景 。 关 于 更 多 的 切换 特效 ， 本 书 不 一 一 列举 ， 
读者 可 参考 js-tests 中 的 TransitionsTest 示 例 。 


3.4.3 场景 的 生命 周期 


在 Cocos2d-JS 引 擎 中 ， 游 戏 场景 在 运行 的 过 程 中 会 经 历 几 个 不 同 的 阶段 ， 这 些 阶 段 就 是 我 们 
所 说 的 生命 周期 。 每 一 个 阶段 缘 表 示 场 景 的 一 个 状态 ， 每 个 状态 都 有 不 同 的 表现 。 场 景 从 构造 到 
最 终 显示 在 屏幕 上 ， 再 到 场景 销毁 以 及 退出 经 历 了 以 下 几 个 阶段 : 


1 var MainMenuScene = cc.Scene.extend ({ 

2 ctor : function(){ // 构造 汤 数 
3 // TODO something 

4 Fs 

5 onEnter : function () { // 场景 进入 
6 this. super(); 

7 // TODO something 

8 }s 

9 onEnterTransitionDidFinish: function () { // 场景 进入 过 渡 效 果 执 行 完 毕 
10 this. super(); 

9 守 // TODO something 

12 es 

13 onExitTransitionDidStart: function(){ // 场景 退出 过 渡 效 果 开 始 执行 
14 // TODO something 

15 this. super(); 

16 二 

17 onExit : function(){ // 场景 退出 
18 // TODO something 

19 this. super(); 

20 } 

2 了 1 中 这 


其 中 ，this._super () 函数 为 调用 父 类 的 当前 方法 。 值 得 注意 的 是 ， 在 退出 相关 的 生命 周 
期 函数 中 ， 应 该 将 this ._super () 函数 放 在 最 后 调用 ， 遵 循 “先进 后 出 ”的 原则 。 


当 两 个 场景 进行 切换 的 时 候 ， 整 个 过 程 的 生命 周期 变化 顺序 如 下 ( 其 中 SceneA 为 当前 场景 ， 
Re ): 


SceneRA : ctor 

SceneA : onEnter 

SceneRA : onEnterTransitionDidFinish 
SceneB : ctor 

SceneA : onExitTransitionDidstart 
SceneRA : onExit 

SceneB : onEnter 

SceneB : onEnterTransitionDidFinish 
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可 以 看 到 ，Cocos2d-JS 会 先 调 用 SceneB 的 ctor 构 造 图 数 ， 然 后 继续 调用 SceneA 的 
onExitTransitionDidstart 和 onExit 国 数 ， 最 后 在 SceneB 的 onEnter 困 数 中 将 SceneB 泻 染 
出 来 。 不 难 发 现 ，SceneB 的 ctor 构 造 函 数 是 两 个 场景 切换 的 关键 所 在 ， 它 是 两 个 场景 切换 时 的 
临界 点 ， 所 以 ， 你 不 应 该 在 场景 的 ctor 函 数 中 做 一 些 对 内 存 开销 大 的 操作 ( 例如 加 载 资源 等 )， 
这 会 导致 两 个 场景 的 资源 都 被 加 载 到 内 存 ， 从 而 可 能 导致 内 存 不 足 ， 引 起 程序 骨 泪 。 


3.5 层 


层 是 一 个 容 骨 ee ed 。 层 一 般 作为 场景 的 子 节 点 ， 当 然 , 它 
也 可 以 作为 其 他 节 点 的 子 节点 ， 进 一 步 管理 子 节 点 的 子 节点 ， 但 这 并 不 多 见 。 下 面 为 cc .Layer 
的 构造 函数 : 


1 cc.Layer = cc.Node.extend({ 

2 _className: "Layer", 

3 ctor: function () { 

4 var nodep = cc.Node.prototype; // 获取 [ 父 类 原型 ] 

5 nodep.ctor.call (this); // 调用 [ 父 类 构造 函数 ] 
6 this. ignoreAnchorPointForPosition = true; // 设置 [忽略 锚 点 ] 
nodep.setAnchorPoint.call(this, 0.5, 0.5); // 设置 [ 锚 点 ] 

8 nodep.setContentSize.call (this, cc.winSize); // 设置 [大 小 ] 

9 } 


10 } 

从 上 述 代 码 的 第 6 行 到 第 8 行 可 以 得 到 , 层 的 一 些 默 认 设 置 和 场景 是 一 样 的 , 也 是 默认 忽略 销 
锚 点 为 (0.5, 0.3)， 且 大 小 为 当前 屏幕 的 大 小 。 

实际 上 ，Cocos2d-JS 提 供 了 4 种 层 ，cc.Layer 只 是 其 中 最 基本 的 一 种 。 除 此 之 外 ， 其 他 3 种 
层 分 别 是 cc .LayerColor、 cc.LayerGradient 和 cc .LayerMultiplex。 值得 注意 的 是 ， 它 


们 都 继承 cc .Layero 


了 
> 


1.cc.LayerColor 


cc.LayerColor 作 为 一 个 可 以 携带 颜色 的 层 , 在 平常 开发 中 非常 常用 , 例如 游戏 中 的 Dialog 
模 态 对 话 框 中 背景 半 透 明 变 暗 的 实现 。 通 常 ， ee LayerColor ， 指 定 颜色 为 
cc.color(0,0,0,138) ， 大 小 为 当前 屏幕 的 大 小 ， 就 像 下 面 这 


var width = cc.winSize.width; // 获取 [屏幕 宽度 ] 

var height = ccwinSize.height; // 获取 [屏幕 高 度 ] 

var dialog =new cc.LayerColor(cc.color (0, 0, 0, 138), width, height); 
this.addCchild(dialog); 


实际 上 , 上 述 第 3 行 代码 传递 进去 的 widath 和 height 是 可 省 略 的 , 这 可 以 从 cc .LayerColor 
中 的 init 方 法 找到 答案 
1 cc.LayerColor = cc.Layer.extend ( { 


2 _blendFunc: null, 
3 _className: "LayerColor", 
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4 a 

5 init: function (color, width, height) { 

9 var winSize = cc.director.getWinSize(); 

10 EOLOF a COLoOF | | GCC-CoOLOE tO, O07 0 :255): 

de width = width === undefined ? winSize.width : width; 

12 height = height === undefined ? winSize.height : height; 

13 

14 Var locRealColor = this. realColor; 

15 locRealColor.r = color.r; 

16 locRealColor.g = color.g 

17 locRealColor.b = color.b; 

18 this. realOpacity = color.a; 

19 this. renderCmd.setDirtyFlag(cc.Node. dirtyFlags.colorDirty 
cc.Node. dirtyFlags.opacityDirty); 

20 

下 cc.LayerColor.prototype.setContentSize.call (this, width, height); 

22 return true; 

23 } 

24 yA 

2 


在 上 面 代码 的 第 10 行 中 可 以 看 到 ， 若 你 在 创建 cc .Layercolor 的 时 候 没 有 指定 颜色 ， 那 么 
cc .LayerColor 的 颜色 将 被 强制 设置 为 cc .color (0,0,0,255)，opacity 被 设置 为 255。 

在 第 11 行 和 第 12 行 中 , Cocos2d-JS 会 去 判断 你 是 否 给 cc .Layercolor 指 定 了 宽度 和 高 度 , 若 
没有 ， 则 强制 设置 为 屏幕 的 大 小 。 所 以 ， 刚 刚 创建 的 cc . LayerColor 就 可 以 简化 成 下 面 这 样 : 


1 var dialog = new cc.LayerColor(cc.color(0, 0, 0, 138)); 
2 this.addCchild(dialog); 


2.cc.LayerGradient 
cc.LayerGradient 为 一 个 颜色 渐变 层 ， 你 可 以 像 下 面 这 样 创建 一 个 从 红色 渐变 到 绿色 的 层 ; 


Var start = cc.color.RED; 

Var end = cc.color.GREEN; 

Var Vector = cc.p(-1, 1); 

var layer = new cc.LayerGradient (start, end, vector); 
5 scene.addChild(layer); 


上 面 第 1 行 和 第 2 行 分 别 定义 了 两 个 颜色 对 象 ， 作 为 开始 和 结束 的 颜色 。 第 3 行 定义 了 一 个 矢 
量 ， 用 于 表示 颜色 过 渡 的 方向 。 


3.cc.LayerMultiplex 


cc .LayerMultiplex 对 象 可 以 用 来 管理 其 他 的 cc .Layer 对 象 ,假设 你 的 游戏 场景 里 面 有 很 
多 层 ， 这 些 层 有 的 时 候 需要 切换 显示 ， 这 时 候 cc.LayerMultiplex 就 可 以 派 上 用 场 了 ， 你 只 需 
将 要 切换 的 层 放 在 cc .LayerMultiplex 对 象 中 , 然后 就 可 以 通过 switchTo (n) 函数 来 切换 到 不 
同 的 屋 上 ，switchTo (n) 函数 的 参数 n 表 示 要 切换 的 cc.Layezr 的 索引 。 例 如 : 


1 var layerl = new cc.LayerGradient (cc.color.RED, cc.color.GREEN, cc.p(-1, 1)); 
2 var layer2 = new cc.LayerColor (cc.color.RED); 
3 var layer3 = new cc.LayerColor (new cc.Color(0,255,0,255)); 
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4 var layerMultiplex = new cc.LayerMultiplex([layerl1l, layer?2, layer3]); 
5 layerMultiplex.switchTo(1); 
6 scene.addChild(layerMultiplex); 


上 面 第 1 行 到 第 3 行 分 别 定 义 了 3 个 不 同 的 cc .Layer 对 象 ， 第 4 行 创建 了 一 个 cc .Layer 
Multiplex 对 象 ，cc .LayerMultiplex 构 造 函 数 接收 一 个 数组 作为 参数 ,将 前 面 创 建 的 三 个 层 
添加 到 cc .LayerMultiplex 上 。 第 5 行 切 换 到 你 要 显示 的 层 ， 其 参数 是 构造 时 传递 进去 的 数组 
的 索引 。 这 里 需要 注意 ， 索 引 不 可 越界 。 


3.6 ”精灵 


精灵 是 游戏 引擎 中 一 个 不 可 或 缺 的 元 素 ， 你 可 以 用 它 来 表示 游戏 中 的 背景 、 主 角 、 血 条 等 对 
象 。 每 个 精灵 一 般 都 关联 着 一 张 纹理 贴图 ， 也 就 是 Texture2D 对 象 ， 所 以 ,在 cc .sprite 类 中 ， 
有 一 个 texture 属 性 ,cc .sprite 演 染 的 矩形 区 域 的 内 容 可 能 是 来 自 这 张 纹理 贴图 的 某 块 区 域 或 


者 是 全 部 ， 当 然 ， 也 可 以 是 一 个 与 纹理 无 关 的 纯色 区 域 。Cocos2d-JS 提 供 了 4 种 创建 精灵 的 方式 ， 
具体 如 下 。 


3.6.1 通过 图 片 资源 创建 


在 创建 精灵 的 时 候 ， 你 可 以 直接 将 要 显示 的 图 片 路 径 当 成 参数 传递 给 构造 函数 ， 就 像 下 面 
这 样 : 

1 var node=new cc.Sprite("res/node 256.png"); 

或 许 在 有 些 地 方 ， 你 还 会 看 到 使 用 如 下 方式 创建 精灵 : 

1 var node=new cc.Sprite(res.sh node 256_ png); 

实际 上 ， 上 面 两 行 代码 的 效果 都 一 样 ， 其 中 res 对 象 只 是 对 资源 做 了 一 个 定义 ,方便 管理 资 
源 。 除 此 之 外 ,它们 并 没有 什么 区 别 。 但 实际 上 ,我 不 推荐 你 用 单 张 图 片 的 方式 创建 精灵 ， 因 为 
这 会 浪费 一 定 的 内 存 ， 详 见 第 11 章 。 


3.6.2 ”通过 纹理 创建 


与 通过 图 片 直接 创建 精灵 不 同 的 是 , 通过 纹理 创建 精灵 需要 你 将 要 使 用 的 图 片 添加 到 纹理 组 
存 里 面 去 ， 然 后 根据 返回 的 纹理 对 象 创建 精灵 ， 有 具体 如 下 : 


1 var textrue = cc.textureCache.addIimage (res.sh node 256 png); 
2 var node =new cc.Sprite (textrue); 


不 过 ， 需 要 说 明 的 是 ， 通 过 上 面 的 第 1 行 代码 ，res.sh_node 256_png 所 对 应 的 图 片 资 源 已 经 
被 加 载 到 内 存 中 了 ， 所 以 ， 此 时 再 通过 如 下 代码 创建 精灵 的 时 候 就 会 快 一 些 : 


1 var node=new cc.Sprite (res.Ssh_node_256_png) ; 
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3.6.3 ”通过 精灵 表单 创建 


精灵 表单 是 一 个 plist 配 置 文 件 和 一 张 图 片 资源 文件 ， 它 将 一 系列 图 片 资源 合成 一 张大 图 ， 然 


后 将 大 小 、 


灵 表 单 的 方式 是 最 合理 、 最 好 的 方式 , 除非 你 对 内 存 的 开销 不 是 很 在 乎 。 精灵 和 精灵 表单 的 关系 
如 图 3-7 所 示 。 | 


坐标 等 配置 保存 在 plist 中 。 它 是 为 了 节省 纹理 所 占用 的 内 存 而 设计 的 ， 所以， 通过 精 


图 3-7 精灵 表单 和 精灵 的 关系 


使 用 精灵 表单 创建 精灵 ,需要 先 将 plist 和 图 片 文件 加 载 到 内 存 , 然后 再 创建 , 相关 代码 如 下 : 


1 cc.spriteFrameCache.addSpriteFrames (res.ull prince plist,res.ull prince png); 
2 var node =new cc.Sprite("#prince stand 1.png"); 


说 明 关于 精灵 表单 的 进一步 说 明 ， 请 详 见 第 11 章 。 


3.6.4 ”创建 带 有 颜色 的 精灵 
前 面 介绍 了 几 种 和 图 片 资源 相关 联 的 精灵 , 但 是 在 一 些 情况 下 ,你 可 能 只 是 需要 一 个 色 块 这 
样 的 精灵 。 那 么 ，Cocos2d-JS 也 提供 了 实现 方式 ， 相 关 代码 如 下 : 


1 var node = new cc.Sprite(); 
2 node.setColor(cc.color(255, 200, 10)); // 设置 颜色 
3 node.setTextureRect (cc.rect (0, 0, 200, 200)); // 设置 纹理 矩形 


需要 注意 的 是 ， 当 你 想 创 建 一 个 纯色 块 精灵 时 ， 你 应 该 像 第 3 行 代码 那样 ， 设 置 它 的 纹理 和 矩 
形 ， 而 不 是 调用 setcontentsize (cc.size(width,height)) 拯 数 。 
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3.7 场景 树 


你 已 经 知道 , Cocos2d-JS 游 戏 中 有 场景 的 概念 , 场景 下 面 组 织 着 各 种 层 , 层 里 面 又 放 着 精灵 、 
标签 ( Label )、UI 等 节点 。 非 常 显 然 ， 这 是 树 的 结构 。 树 是 数据 结构 中 非常 重要 的 一 个 概念 ， 它 
通常 被 用 来 组 织 一 些 具 有 层次 结构 的 数据 ， 而 Cocos2d-JS 正 是 结合 了 树 的 概念 ， 实 现 了 对 节点 的 
查找 、 遍 历 、 修 改 和 排序 。Cocos 游 戏 场景 树 如 图 3-8 所 示 。 


图 3-8 ”Cocos 游 戏 场景 树 


根 节 点 为 场景 , 场景 的 子 节点 是 一 些 层 , 你 应 该 合理 地 分 类 和 管理 好 你 的 层 , 然后 把 对 应 的 
节点 放 在 对 应 的 层 中 。 例 如 ,背景 层 放 一 些 背 景 相关 的 精灵 ， 游 戏 层 放 英雄 、 敌 人 等 游戏 对 象 ， 
而 UI 层 则 应 该 放 一 些 按钮 之 类 的 UI。 当 然 ， 你 还 可 以 创建 更 多 的 层 来 管理 游戏 。 


3.8 标签 


Label 标 签 一 般 用 来 显示 玩家 的 名 字 、 等 级 、 物 品 数量 等 文本 。 实 际 上 ， 它 和 cc . sprite 等 
一 样 ， 属 于 引擎 核心 泻 染 部 分 。Label 标 签 分 为 LabelTTF 、LabelBMFont 和 LabelAtlas。 


3.8.1 cc.DLabelmTmF 字体 标签 


TTEF ( TrueType Font ) 是 一 种 字库 规范 , 是 Apple 公司 和 Microsoft 公司 共同 推出 的 字体 文件 
格式 。 随 着 Windows 的 流行 ，TTF 已 经 变 成 最 常用 的 一 种 字体 文件 表示 方式 。LabelTTF 直 接 使 用 
TTF 字库 ， 可 以 支持 全 部 的 中 文 ， 但 是 效率 稍微 低下 。 创 建 一 个 LabelTTF 的 代码 如 下 : 

1 var node = new cc.LabelTTF ("Hello World", "Arial", 32); 

其 中 ，Hello Wor16 为 文本 内 容 ，Arial 为 系统 自 带 的 字体 库 ， 也 是 默认 字体 库 ，32 表 示 字 体 大 
小 。 另 外 , 如 果 创 建 LabelTTF 对 象 时 未 给 出 字体 名 字 或 者 给 出 的 名 字 系统 中 不 存在 , 则 使 用 引擎 
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默认 字体 初始 化 对 象 。cc .LabelTTF 的 构造 函数 以 及 参数 说 明 如 表 3-17 所 示 。 


表 3-17 cc .LabelTTF 构 造 函 数 以 及 参数 说 明 


构造 函数 cc.LabelTTF (text, fontName, fontSize, dimensions, hAlignment, vAlignment) 
参 数 参数 说 明 
font 字体 文件 或 字体 名 称 
fontSize 字体 大 小 ， 值 必须 大 于 0 
参数 列表 aimensions 文本 的 内 容 大 小 
hAlignment 水 平 对 齐 方 式 
vAlignment 垂直 对 齐 方 式 
hnAlignment 可 取 的 值 如 下 。 


口 cc .TEXT_ALIGNMENT_LEFT: 表示 左 对 齐 。 

口 cc .TEXT_ALIGNMENT_CENTER: 表示 居中 对 齐 。 
口 cc .TEXT_ALIGNMENT_RIGHT: 表示 右 对 齐 。 
vAlignment 可 取 的 值 如 下 。 
口 cc.VERTICAL_TEXT_ALIGNMENT_TOP: 表示 上 对 齐 。 

口 cc.VERTICAL_TEXT_ALIGNMENT_CENTER : 表示 居中 对 齐 。 
口 cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM : 表示 下 对 齐 。 


此 外 ，cc.LabelTTF 常 用 API 如 表 3-18 所 示 。 


表 3-18 cc.LabelTTF 常 用 API 


返回 值 类 型 参数 类 型 函 数 说 明 
String 无 getstring () 获取 内 容 
无 String setSstring (text) 设置 内 容 
Number 无 getLineHeight () 获取 行 高 
无 Number setLineHeight (lineHeight) 设置 行 高 
cc.Size 无 getFontSize() 获取 字号 大 小 
无 ce.Size setFontSize(size) 设置 字号 大 小 
cc.Size 无 getDimensions () 获取 文本 内 容 大 小 
无 cc.Size|Number setDimensions (dim, height) 设置 文本 内 容 大 小 
Number 
String 无 getFontName () 获取 字体 文件 或 名 称 
无 String setFontName (name) 设置 字体 文件 或 名 称 
cc.FontDefinition 无 getTextDefinition() 获取 文本 属性 定义 
无 cc.FontDefinition setTextDefinition( 设置 文本 属性 定义 
theDefinition) 
Number 无 getHorizontalAlignment () 获取 文本 水 平 对 齐 方 式 


( 续 ) 
返回 值 类 型 参数 类 型 函 数 说 明 

无 Number setHorizontalAlignment (alignment) 设置 文本 水 平 对 齐 方式 
Number 无 getVerticalAlignment () 获取 文本 垂直 对 齐 方式 
无 Number setVerticalAlignment (alignment) 设置 文本 垂直 对 齐 方式 
无 cc.Color|Number enableShadow(a, b, c, qd) 启用 文本 阴影 效果 

cc.Sizel|Number 

Number 

null | Number 
无 无 disableShadow() 关闭 文本 阴影 效果 
无 COCOLOF enableStroke(strokeColor, 启用 文本 描 边 效果 

J strokeSize) 

无 disableStroke() 关闭 文本 描 边 效果 


3.8.2 cc.LabelBMFont 位 图 标签 


cc.LabelBMFont 是 一 种 纹理 图 集 形 式 的 标签 类 ， 支 持 FNT 类 
每 个 字符 都 可 以 被 看 做 一 个 精灵 ， 每 个 精灵 “映射 ”纹理 图 集中 的 某 一 
文 个 精灵 的 坐标 变化 。 


示 文 本 内 容 ， 
际 上 ， 每 次 切换 字符 就 是 这 


型 的 文件 ， 它 使 用 图 片 文 件 显 


块 区域 。 实 


位 图 字体 由 专门 的 编辑 工具 制作 而 成 ， 例 如 Mac OS X 下 的 Glyph Designer ( 下 载 地 址 : 
https://71squared.com/glyphdesigner ) 和 Windows 下 的 BMFont( 下 载 地 址 :http:/www.angelcode.comy 


products/bmfont/ ) 等 。 


通过 编辑 器 制作 完 FNT 字 体 文件 后 ， 会 生成 一 个 .png 格 式 的 文字 集 图 片 和 


一 个 .fh 格式 的 字体 信息 文件 ， 其 中 .fnt 文 件 中 包含 了 对 应 文字 集 图片 的 名 字 、 字 符 在 文字 集 图 片 


中 的 坐标 、 宽度 以 及 高 度 等 信息 Bo 


创建 一 个 cc .LabelBMFont 的 代码 如 下 : 


1 var node = new cc.LabelBMFont ("123", 


其 中 ，123 为 文本 内 容 ， 


cc .LabelBMFont 构 造 了 两 数 以 及 参数 说 明 如 表 3-19 所 示 。 


表 3-19 ”cc .LabelBMFont 的 构造 函数 以 及 参数 说 明 


"res/unit03_ base/fonts/number.fnt"); 


"res/unit03_base/fonts/number.fnt" 为 FNT 字 体 文件 的 路 径 。 


构造 函数 cc.LabelBMFont (str, fntFile, width, alignment, imageOffset) 
参 参数 说 明 
St 文本 内 容 
fntFile 字体 文件 
参数 列表 
width 最 大 线 宽 
alignment 对 齐 方 式 (水 平方 向 ) 
imageOffset 第 一 个 字符 在 位 图 文件 中 的 偏 移 量 
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其 中 alignment 可 取 的 值 如 下 。 


口 cc .TEXT_ALIGNMENT_LEFT: 表示 左 对 齐 。 
口 cc .TEXT_ALIGNMENT_CENTER:， 表示 居中 对 齐 。 
口 cc .TEXT_ALIGNMENT_RIGHT: 表示 右 对 齐 。 


此 外 ，cc.LabelBMFont 常 用 API 如 表 3-20 所 示 。 


[ea| 


表 3-20 ”cc .LabelBMFont 常 用 API 


返回 值 类 型 参数 类 型 函 数 说 明 
String 无 getstring () 获取 内 容 
无 String setSstring (text) 设置 内 容 


3.8.3 cc .LabelAtlas 字符 映射 标签 


cc.LabelAtlas 号 称 速 度 最 快 的 标签 ， 它 直接 使 用 图 片 初始 化 文字 对 象 ， 这 一 般 适 合用 在 
频繁 更 新 的 标签 上 ， 例 如 精确 到 毫秒 的 定时 器 等 。 

cc.LabelAtlas 将 传人 的 文字 集 图 片 “ 拆 分 ”成 指定 高 度 和 宽度 的 小 块 ，cc.LabelAELas 
对 文字 集 图 片 中 内 容 的 要 求 是 非常 严格 的 , 即 你 不 能 有 任何 一 个 像素 的 偏差 。 图 片 中 的 文本 要 按 
照 ASCII 顺 序 排列 ， 在 创建 cc .LabelAt1las 标 签 的 时 候 , 需要 设置 开始 字符 。 在 这 种 情况 下 , 文 
字 集 图 片 的 设计 自由 度 就 不 那么 高 了 ， 你 必须 保证 要 使 用 的 字符 的 ASCII 是 连续 的 。 只 有 数字 、 
字母 以 及 一 些 运算 符号 符合 这 样 的 标准 ， 也 只 有 这 些 情况 可 以 考虑 使 用 LabelAtlas， 这 直接 导致 
cc .LabelAtlas 的 使 用 不 是 那么 广泛 ， 更 多 的 则 是 考虑 TTF 或 BMFont 实 现 。 


cc.LabelAtlas 标 签 的 创建 代码 如 下 : 
1 var node = new cc.LabelAtlas("789", "res/unit03 base/fonts/score.png", 41, 50, '0'); 


cc .LabelAtlas 的 构造 函数 以 及 参数 说 明 如 表 3-21 所 示 。 


表 3-21 cc .LabelAtlas 构 造 函 数 以 及 参数 说 明 


构造 函数 cc.LabelAtlas (strText, charMapFile, itemWidth, itemHeight, startCharMap) 
参 数 参数 说 明 
strText 文本 内 容 
charMapFile 图 片 名 称 
参数 列表 itenwiath 每 个 “小 块 ”的 宽度 
itemHeight 每 个 “小 块 ” 的 高 度 
startCharMap 起 始 字符 


此 外 ，cc.LabelAtlas 常 用 API 如 表 3-22 所 示 。 


表 3-22 cc .LabelAtlas 常 用 API 


返回 值 类 型 参数 类 型 函 数 说 明 
String 无 getstring () 获取 文本 内 容 
无 String setString (value) 设置 文本 内 容 


3.8.4 ”使 用 编辑 器 制作 FNT 字体 


这 里 我 以 Windows 下 的 BMFont 编 辑 器 为 例 , 讲解 一 下 如 何 制 作 自 己 的 FNT 字 体 。 首先 , 我 准 
备 了 10 张 小 数字 图 片 ， 每 张 的 尺寸 为 40 x 50 像 素 ， 如 图 3-9 所 示 。 


0 1 2 3 4 


number_0.png number 1.png number_2.png number_3.png number_4.png 
number_5.png number_6.png number_7.png number_8.png number_9.png 


图 3-9 ”10 张 数字 小 图 
接着 打开 BMFont 编 辑 器 ， 页 面 如 图 3-10 所 示 。 


图 Bitmap font generator 局 x 


Options Edit 


人 
门 000100 Latin Extended A 
状 本 本 量 本 本 本 放 业 本 本 本 本 是 旺 业 7 
本 国 国 国 国 本 国 国 故国 国 国 故国 国 国 ow% we 
D0002B80 Spacing Modifier Letters 
国 国 国 国 本 国 硬 国 国 硬 国 本 故国 国 国 ow cm vec vor 
加 本 国 醒 国 加 国 国 本 国 本 图 本 本 国 图 
D000400 Cyrillic 
加 图 国 国 国 本 本 故国 国 国 国 国 故国 国 ow ow pene 
加 厨 而 面 曾 剖 国 国 曾 别 阐 硬 业 而 粳 业 2 


3 D000750 Arabic Supplement 
加 加 
站 001D80 phonetic Extensions Supple. 
国 国 国 国 国 国 国力 转 回国 回国 加 图 国 口 opc cm voce vor 
| eeee 人 
D001F00 Greek Extended 
图 国 加 图 国 国 国 国 国 硬 国 国 本 本 本 本 Co sn 
国 硬 国 硬 国 国 国 国 故国 国 国 国 国 国 国 FP 
0020A0 Currency Symbols 
回回 男 加 加 回国 国 加 回回 回国 国 国 国 品 ozo -ooo-…- 
| | os” 
mn315nNn Numher Fnrme 


selected characters: 0/3185 lLatin + Latin Supplement 159 : 9F 


3-10 BMFont 编 辑 器 
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编辑 器 中 左边 为 当前 支持 的 字符 , 右边 为 字体 库 。 点击 Edit 一 Open Image Manager, 打开 Image 
Manager 面 板 ， 如 图 3-11 所 示 。 


国 Bitmap font generator 

Options Edit 

{UnjSelect all chars [CTRL]+[A] 
Select marked subset[s) 

Unselect marked subset(s) 


Clear all chars in font 
Select chars from file 


Find next failed character [E] 


Clear failed characters 


Open Image Manager 


图 3-11 打开 Image Manager 面 板 


在 Image Manager 面 板 中 ， 点 击 Image 一 Import image... 菜 单 ， 将 事先 准备 好 的 文字 图 片 导入 进 
来 ， 如 图 3-12 所 示 。 


Image Manager xX 


Image 
Import image,.. 
Edit Image,.. 
Delete selected 


图 3-12 ”在 Image Manager 中 导入 图 片 


此 时 先导 入 number 0.png， 导 入 图 片 后 ， 将 出 现 如 图 3-13 所 示 的 面板 。 


Icon Image Xx 


File: [ceusersnefFpesktopmumbermumber_0.png Browse | 
Id: Pp x offset: Pp 习 


X advance: Pp 计 +image Y offset: Pp 二 
co | 


图 3-13 ”Icon Image 面 板 
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其 中 ， 需 要 修改 的 是 Id 的 值 。 当 前 导入 的 图 片 是 aumber 0.png， 在 字符 集中 将 鼠标 放置 在 字 
符 0 的 上 方 ，Id 值 便 在 BMFont 编 辑 器 主页 面 中 的 右 下 角 显 示 出 来 ， 如 图 3-14 所 示 。 此 时 得 到 0 的 Id 
值 为 48， 那 么 将 图 3-13 中 的 Id 改 为 48， 点 击 OK 按钮 即 可 。 


国 Bitmap font generator 
Options Edit 


0 ein | 


加 000100 Latin Extended A 


,000250 IPA Extensions 
门 0002B0 Spacing Modifier Letters 
次 本 - 000300 Combining Diacrtical Marks 


ES 000370 Greek and Coptic 


5 上 000400 Cyrillic 
思 000500 Cyrillic Supplement 


门 002000 General Punctuatio 


v 


Latin + Latin Supplement |48 Sl 党 
图 3-14 ”获取 Idq 值 


重复 此 步 又， 将 1 到 9 的 图 片 全 部 导入 进来 。 完 成 之 后 ，BMFont 编 辑 咒 中 对 应 的 字符 的 右 下 
角 会 出 现 一 个 蓝 色 的 小 点 ， 如 图 3-15 所 示 。 


图 3-15 ”导入 图 片 后 的 情况 


接着 ， 点 击 Options 一 Font settings， 打 开 Font Settings 面 板 ， 如 图 3-16 所 示 ， 将 Size 设 置 为 40 
像素 , 这 是 因为 我 准备 的 数字 小 图 片 的 尺寸 是 40 x 50。 最 后 , 点 击 OK 按 钮 关闭 Font Settings 面 板 。 

完成 上 述 所 有 步骤 之 后 , 便 可 将 字体 导出 。 点 击 Options 一 Export options, 打开 Export Options 
面板 ， 如 图 3-17 所 示 。 将 Spacing 设 为 0，Bit depth 选 择 32，Textures 选 择 png 格 式 ， 最 后 点 击 OK 按 
钮 ， 关 闭 Export Options 面 板 。 
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Font Settings x Export Options x 
— Fontgraphics 一 一 
Paddng [0 
Font |Arial 下 厂 二 三 
Add font fle: 图 [om 
厂 Equalze the cell heights 
Charset 个 Unicode 厂 Force offsets to zero 
© OEM [ANsl -| 一 Texture 一 
= widh [400 Height [50 
Size 向 司 | FT Matcheharheiont 区 
Bitdepth 个 8 全 32 
Height%: Jo 本 CF Bod 万 Itaic 厂 Pack chars in muliple channels 
厂 Dutput invalid char glyph Chnl Value Invert 
厂 Do not include kerming pairs 点 |outine 了 请 
PR: [aph = 
-一 Rasterization 一 一 2E 到 
厂 Render fom TrueType outh ee 下 
ender from TrueT ype outine 人 FE 
区 TrueType hinting 
Presets: |Custom 了 
ly Font smoothing ly ClearType 
一 Fiefomat 一 
记 Super samping ev 忆 习 Font descriptor 他 Text © XML 广 Binan 
=— Efeay = i 
: [png - Portal 
Dutline thickness: |0 三 or Donae 
co | 要 


图 3-16 ”Font Settings 面 板 图 3-17 ”Export Options 面 板 


最 后 ， 点 击 Options 一 Save bitmap font as.… 导出 字体 文件 ， 可 以 得 到 一 个 .png 和 一 个 .ft 文件。 


3.9 ”实例 一 一 《保卫 萝卜 2》 主 页 面 开发 


在 上 一 童 的 实例 中 ， 你 已 经 完成 了 《保卫 萝卜 2》 项 目的 创建 ,结合 本 章 所 学 的 知识 ， 开 发 
《保卫 萝卜 2》 的 主页 面 已 然 不 在 话 下 。 所 以 在 本 童 的 实例 中 ， 我 将 与 你 一 起 开发 《保卫 萝卜 2》 
的 主页 面 ， 完 成 后 的 效果 如 图 3-18 所 示 。 


图 3-18 《保卫 葛 卜 2》 主 页 面 
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3.9.1 主页 面 设计 思 


在 正式 编写 代码 之 前 ， 你 应 该 先 看 看 《保卫 萝卜 2》 主 页 面 的 美术 素材 提供 情况 ， 如 表 3-23 
所 示 。 


表 3-23 


《保卫 葛 卜 2》 主 页 面 图 片 资源 表 


而 


主页 面 背 景 图 主页 面前 景 图 
@ 
国 
> : 4 
? 站 光 
“问号 ”按钮 抬 起 状态 | “问号 ”按钮 按 下 状态 |“ 设 置 ” 按 钮 抬 起 状态 |“ 设 置 ” 按 钮 按 下 状态 落下 
届 
怪物 1 号 怪物 2 号 怪物 3 号 怪物 4 号 怪物 5 号 
a Ss 
; 渭 旋 竺 
怪物 6 号 怪物 6 号 的 手 锁 云 打 1 云 末 2 
一 一 
law 二 | HE _ 天 天 向 上 2 
云 朱 3 “开始 冒险 ”按钮 “开始 冒险 ”按钮 “天 天 向 上 ”按钮 “天 天 向 上 ”按钮 
台 起 状态 按 下 状态 台 起 状态 按 下 状态 


结合 图 3-9 和 表 3-1， 你 应 该 会 发 现 ,《 保 卫 葛 卜 2》 的 主页 面 开发 并 不 难 ， 可 将 页 面 的 内 容 用 


两 个 层 管理 ， 


目 . 导 局 辐 . 户 
一 个 是 背景 会 ， 


个 是 用 户 交互 层 。 


背景 层 仅 放 一 张 主页 面 背 景 图 ， 其 余 的 因为 有 层级 关系 以 及 用 户 交 互 ， 所 以 放 到 了 用 户 交 


互 层 。 
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用 户 交 互 层 主要 是 放 了 一 个 “开始 冒险 ”和 “天 天 向 上 ”菜单 ， 以 及 “帮助 ”和 “设置 ”这 
两 个 按钮 。 另 外 , 怪物、 萝卜 以 及 云 打 因为 有 层级 关系 ， 所 以 ,我 不 得 不 也 将 它们 放 到 用 户 交 互 
层 当 中 来 。 那 么 接 下 来 ， 就 开始 开发 《保卫 萝卜 2》 的 游戏 主页 面 吧 。 


3.9.2 视图 设 定 


首先 , 在 WebStorm 中 展开 Carrot 工 程 , 打开 index.html 文 件 , 删除 bogy 标 签 中 的 background 
遇 性 ， 使 bodqy 不 带 背 景 颜色 ， 这 么 做 只 是 为 了 让 canvas 在 body 中 更 明显 地 显示 出 来 。 然 后 ,将 
canvas 标 签 中 的 wiath 和 height 属 性 的 值 改 为 1136 和 640 ,把 视图 的 设计 分 辩 率 的 尺寸 大 小 也 设 
置 为 宽 1136、 高 640, 它 应 该 在 main.js 文 件 中 的 cc .game .onstart () 方 法 中 被 调用 到 。 代 码 如 下 : 


1 //cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ ALL); 
2 cc.view.setDesignResolutionSize(1136, 640, cc.ResolutionPolicy.SHOW ALL); 


这 里 分 别 将 canvas 和 游戏 的 设计 分 辨 率 尺寸 设置 为 1136 x 640， 是 因为 《保卫 萝卜 2》 的 美 
术 素 材 就 是 基于 此 分 辨 率 设计 的 。cc .view.setDesignResolutionSize() 函 数 用 来 设置 游戏 
设计 分 辨 率 的 尺寸 以 及 适 配 策略 ， 具 体 详 见 第 7 章 。 


3.9.3 代码 文件 架构 


在 src 文 件 夹 下 删除 app.js 文 件 ， 并 创建 如 图 3-19 所 示 的 文件 夹 以 及 .js 文件 ,然后 在 projectjson 
中 引入 这 些 .js 文件 ， 如 图 3-20 所 示 。 


Vv DCocos2d-JS (/Applications/XAMPP/htdocs/Cocos2d-JS) 
v DCarrot 
Pp Dframeworks 


Y DScene 
了 DMainMenu 
vv DLayer 
于 Background.js 
于 Main.js 
中 Node 
MainMenu.js 
二 resource.js 
bsoh .COCOS-project.json 
=] CMakeLists.txt 
由 index.html 
于 main.js 
目 manifest.webapp 
Boh project.json 


图 3-19 ”Cocos 游 戏 代码 文件 组 织 结 构 
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"jsList" : [ 
"src/resource.js", 
"src/config.js", 
"src/Scene/MainMenu/Layer/Background.js", 


"src/Scene/MainMenu/Layer/Main.js", 
"src/Scene/MainMenu/MainMenu.js" 


图 3-20 jsList 数 组 


说 明 ”以 后 再 新 建 的 .js 文件 , 都 默认 需要 在 project.json 的 jsList 数 组 中 引入 ,本 书 不 再 一 一 强调 。 


图 3-19 是 我 个 人 组 织 场景 的 一 种 方式 ， 我 总 喜欢 把 场景 元 素 尽 可 能 地 按 功 能 、 模 块 组 织 好 ， 
使 得 代码 条 理 清晰 、 场 景 组 织 井 然 有 序 。 

在 图 3-19 中 , MainMenu 文 件 夹 为 一 个 模块 , 用 来 存放 主页 面 中 的 相关 实现 代码 。 MainMenu.js 
文件 为 主页 面 场景 实现 ,Layer 文 件 夹 下 的 Background.js 和 Main.js 分 别管 理 主页 面 场景 中 的 背景 层 
以 及 用 户 交 互 层 ， 一 般 我 也 会 将 游戏 逻辑 放 在 Main.js 中 。 


3.9.4 主页 面 BackgroundLayer 开发 


当 相 关 .js 文 件 创建 完毕 之 后 ， 便 可 以 开发 Carrot 的 游戏 场景 了 。 此 时 在 res 路 径 下 新 建 
MainMenu 文 件 夹 ， 然 后 打开 随 书 资源 ， 把 主页 面 的 美术 素材 复制 到 MainMenu 文 件 夹 中 ， 接 着 在 
resource.js 文 件 中 声明 这 些 文件 。 


说 明 在 后 续 章节 中 ， 资 源 声明 或 加 载 等 步骤 不 再 阅 述 ， 读 者 可 自行 查阅 随 书 源码 中 的 


resource.js 文 件 。 


注意 在 Web 上 ， 资 源 要 预 加 载 ， 即 需要 在 resource.js 中 定义 ,否则 用 此 资源 创建 出 来 的 精灵 的 
大 小 都 是 0。 


接着 ， 在 Scene/MainMenu/Layer/Background.js 文 件 中 键入 如 下 代码 : 


1 var MMBackgroundLayer = cc.Layer.extendl(t{ 
2 ctor : function () { 

3 this._super(); 

4 // 加 载 [背景 ] 

5 this.loadBackgound () ; 

6 return true; 

7 二 

8 loadBackgoungd : function(){ 

9 var node = new cc.Sprite("res/MainMenu/zh/front bg.png"); 
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10 this.addChild (node); 

i node.setPosition(cc.winSize.width / 2, cc.winSize.height / 2); 
入 } 

13. “小 


A 


第 1 行 代码 定义 了 MMBackgroundLayer 类 ， 它 继承 了 cc .Layero 类 名 MMBackgroundLayer 
最 前 面 的 MM 为 MainMenu 的 缩写 ， 这 也 是 我 个 人 的 一 个 习惯 ,主要 是 为 了 避免 和 其 他 场景 中 的 
BackgroundLayer 混 淆 。 第 2 行 代码 定义 了 MMBackgroundLayer 类 的 构造 肖 数 ,通过 
this._super() 接 口 调用 了 父 类 的 ctor 构 造 函 数 。 


第 8 行 到 第 12 行 是 加 载 背 景 精灵 的 函数 ， 它 在 构造 函数 中 被 调用 到 。 在 第 11 行 代码 中 ， 将 背 
景 精灵 的 坐标 设置 为 屏幕 的 正中 间 。 


3.9.5 主页 面 MainLayer 开发 


使 用 同样 的 方式 , 在 Scene/MainMenu/Layer/Main.js 文 件 中 定义 MMMainLyer。MMMainLayer 
的 开发 比 MMBackgroundLayer 复 杂 一 些 , 所 以 这 里 我 把 MMMainLayer 中 要 做 的 事情 用 注释 的 方 
式 写 在 了 构造 函数 中 ， 然 后 逐个 开发 ， 具 体 如 下 : 


1 var MMMainLayer = cc.Layer.extend({ 

2 ctor : function()t{ 

3 this._super(); 

4 // 加 载 [“ 开 始 冒 险 ” 和 “天 天 向 上 ”菜单 ] 
5 // “设置 ” > 

6 // 加 载 [“ 帮 助 ”按钮 

7 // pe ne 怪物 ] 

8 // 加 载 底部 让 挡 在 1 号 、5 号 以 及 6 号 怪物 之 前 的 [ 云 杀 ] 
9 // 加 载 前 面 的 5 号 [怪物 ] 

10 // 加 载 前 面 遮 哩 在 5 号 怪物 身上 的 [ 云 采 ] 
11 // 加 载 [ 莫 下 ] 

12 // 加 载 [前 景 ] 

13 } 

4 


毫 无 疑问 , 秉承 模块 化 开发 的 风格 ,我 会 对 这 些 要 做 的 事情 都 写 一 个 函数 。 下 面 先 从 加 载 菜 
单 开 始 ， 它 的 实现 代码 如 下 : 


1 // 加 载 [“ 开 始 冒 险 ” 和 “天 天 向 上 ”菜单 ] 
2 loadMenu : function(){ 
3 
4 


// 开始 冒险 
var startNormal = new cc.Sprite("res/MainMenu/zh/front_ btn start normal. 
png"); 

5 var startPress = new cc.Sprite("res/MainMenu/zh/front btn start pressed. 
png"); 

6 var startDisabled = new cc.Sprite("res/MainMenu/zh/front_ btn start normal. 
png"); 

7 Var start = new cc.MenuItemSprite!( 

8 startNormal, 

9 startPress, 

10 startDisabledqd, 


1 function(){ 

12 cc.1og(" 点击“ 开始 冒险 ”按钮 ") ; 

13 }.bind (this)); 

14 start.setPosition(cc.winSize.width / 2-8, cc.winSize.height / 2+75); 
Hi 

16 //“ 天 天 向 上 ”菜单 项 的 开发 与 开始 冒险 类 似 ， 此 处 省 略 ， 具 体 见 随 书 代 码 
1 A 

18 

19 Var menu = new cc.Menu(start, floor); 

20 this.addChild (menu); 

21 menu.setPosition(0, 0); 

22 3} 


第 7 行 代码 创建 了 开始 冒险 的 精灵 菜单 项 ， 其 中 需要 3 个 精灵 来 表示 正常 、 按 下 、 禁 用 状态 。 
第 11 行 代码 为 此 菜单 项 点 击 之 后 所 触发 的 函数 ， 最 后 在 第 18 行 将 菜单 项 添加 到 菜单 中 。 

而 其 他 的 怪物 、 葛 下、 云 基 等 都 只 是 一 个 精灵 ， 创 建 方式 较为 简单 。 下 面 以 创建 葛 下 为 例 ， 
相关 代码 如 下 : 

1 // 加 载 [ 募 下] 


2 loadCarrot : function(){ 

3 Var node = new cc.Sprite("res/MainMenu/front_ carrot .png"); 
4 this.addChild (node); 
5 

6 


node.setPosition(cc.winSize.width / 2 + 100, 20); 


} 

为 其 他 怪物 和 云 条 等 都 是 简单 的 精灵 ,创建 代码 也 都 差不多 , 所 以 这 里 就 不 贴 出 全 部 代码 ， 
读者 可 自行 查阅 随 书 代码 。 男 外 ， 因 为 “设置 "“ 帮 助 ”按钮 属于 UI 控件 ( 参见 第 10 章 )， 所 以 ， 
它们 的 正确 开发 方式 将 在 第 10 章 中 优化 ， 这 里 我 先 用 精灵 的 方式 实现 。 

当主 页 面 都 开发 完毕 之 后 ， 运 行 项 目 ， 效 果 如 图 3-18 所 示 。 


3.10 ”小 结 


通过 本 章 的 学 习 ， 我 们 知道 在 Cocos2d-JS 游 戏 引 擎 中 存在 导演 对 象 cc .director， 它 是 整 
个 游戏 的 统筹 , 负责 设置 游戏 的 运行 环境 ,把 控 整 个 游戏 的 主 循环 以 及 游戏 场景 的 切换 等 工作 。 
此 外 ,我 们 掌握 了 Cocos 引 警 的 三 大 元 素 一 一 场景 、 层 和 精灵 ， 它 们 都 继承 自 cc .Node 节 点 类 ， 
而 cc .Node 为 子 类 提供 了 大 量 的 属性 和 API。 场景 类 似 京剧 中 的 舞台 , 一 次 只 能 运行 一 个 , 每 个 
Cocos2d-JS 游 戏 至 少 存在 一 个 以 上 的 场景 。 层 对 应 京剧 中 的 幕布 ， 可 将 游戏 中 的 节点 按 功 能 划 
分 到 对 应 的 层 。 而 精灵 可 以 理解 为 京剧 中 的 演员 ， 在 2D 游 戏 中 ,你 可 以 将 精灵 直接 理解 为 一 张 
图 片 。 


3.11 参考 资源 


本 章 的 参考 资源 为 Cocos2d-JS 官方 API : http://www.cocos.com/doc/jsdoc/index.html。 


第 4 章 


动作 模块 


在 一 些 回 合 制 游戏 中 ,你 可 能 会 看 到 这 样 一 个 画面 : 某 个 游戏 人 物 从 它 当 前 的 位 置 快速 移动 
到 敌 方 阵地 , 攻击 了 一 下 敌 方 之 后 又 立马 跑 回来 , 这 样 的 指令 实际 上 是 一 个 组 合 动作 , 除 此 之 外 ， 
例如 信物 的 奔跑 、 网 球 的 曲线 运动 、 心 脏 跳动 、 落 叶 球 落 等 效果 都 可 以 通过 动作 实现 。 由 此 可 见 ， 
动作 是 游戏 中 极其 重要 的 一 个 模块 ， 熟练 掌 握 Cocos2d-JS 的 动作 ， 可 以 让 你 的 游戏 锦上添花 。 本 
章 将 围绕 Cocos2d-JS 的 动作 展开 ， 并 让 《保卫 萝卜 2》 的 主页 面 动 起 来 。 
本 章 内 容 : 
口 cc.Action 
口 瞬时 动作 
D 持续 动作 
口 变速 动作 
口 实例 一 一 让 《保卫 更 下 2》 的 主 界 面 动 起 来 


I Tm TT 


4.1 cc.Action 


动作 作用 于 cc .Node， 每 个 节点 都 可 以 通过 runAction (action) 函数 运行 一 个 或 多 个 动 
作 ， 每 个 动作 保存 着 指定 的 规则 供 节点 运作 。 在 Cocos2d-JS 中 ， 动 作对 应 的 类 是 cc .Action, 它 
是 所 有 动作 类 的 父 类 ， 其 构造 子 数 如 下 : 


1 cc.Action = cc.Class.extend({ 

2 originalTarget :null, 

3 target :null, 

4 tag:cc.ACTION TAG INVALID, 

5 ctor:function () { 

6 this.originalTarget = null; 
7 this.target = null; 

8 this.tag = cc.ACTION TAG INVALID; 
9 } 

10 OO 

于 下， 过 


可 以 看 到 ， 该 类 定义 了 3 个 属性 : 初始 目标 ( originalTarget )、 目 标 (target ) 以 及 动 
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作 标 签 (tag )。 动作 是 允许 克隆 的 ， originalTarget 始 终 指 向 第 一 次 运行 此 动作 的 节点 ， 而 
target 则 为 当前 正在 运行 此 动作 的 节点 ，tag 则 是 一 个 动作 的 唯一 标识 ， 它 的 默认 值 为 -1。tag 
一 般 被 用 在 cc.Nodae 的 stopActionByTag(tag) 等 函数 中 。 


动作 类 的 大 多 数 实现 类 都 继承 有 限时 间 类 ( cc.FiniteTimeaAction )，cc.FiniteTime 
Action 类 定义 了 reverse() 图 数 ， 调 用 此 上 明 数 可 以 获得 一 个 与 当前 动作 相反 的 动作 ， 这 称 为 着 
动作 。 例 如 ， 一 个 精灵 运行 了 旋转 负 45" 的 动作 ， 那 么 调用 reverse () 函数 ， 将 返回 一 个 旋转 正 
45? 的 动作 ， 但 是 并 不 是 所 有 的 动作 都 可 返回 道 动作， 详情 可 参见 对 应 动作 的 源码 。 另 外 ， 
cc.FiniteTimeAction 还 派生 出 瞬时 动作 cc.ActionInstant 和 持续 性 动作 cc .Action- 


Interval， 它 们 各 自 的 子 类 继承 关系 如 图 4-1 所 示 。 
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图 4-1 动作 继承 关系 


4.2 ”瞬时 动作 


在 一 帧 内 执行 结束 的 动作 称 为 瞬时 动作 。cc .ActionInstant 是 所 有 有 瞬时 动作 类 的 父 类 , 例 
如 cc.Place、cc.Hidqe、cc.RemoveSself 等 都 是 瞬时 动作 。 
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4.2.1 cc.Place 
cc.Place 的 作用 是 将 节点 放置 到 某 个 指定 位 置 ， 实 际 上 它 只 是 修改 了 节点 的 position 坐 
标 。 所 以 ， 若 你 想 通 过 一 个 动作 将 节点 放置 到 屏幕 坐标 (100, 86)， 可 以 像 下 面 这 样 做 : 


1 var place = cc.place(100, 86); 
2 node.runAction(place); 


说 明 Cocos2d-JS 简 化 了 动作 的 创建 方式 ， 为 所 有 的 动作 定义 了 快速 创建 的 函数 。 例 如 ， 4 
cc.pblace 函 数 的 实现 如 下 : 


1 cc.place = function (pos, y) { 
2 return new cc.Place(pos, y); 
3 


4.2.2 ce.Flipx 和 和 cc.FlipY 


cc .FlipXx 和 cc .FlipY 这 两 个 动作 在 本 质 上 是 一 样 的 ， 只 是 作用 的 方向 不 同 。cc .Flipx 是 
将 目标 水 平 翻转 , 而 cc.FlipY 则 是 将 目标 垂直 翻转 ,true 和 false 表 示 是 否 翻转 。 一 般 情 况 下 ， 
cc.FLipX 和 cc.FlLipYy 作 用 于 cc.sprite 或 cc.Sprite 的 子 类 上 ， 代 人 码 如 下 : 


1 var flipx 
2 var flipY 


cc.flipxX(true); 
cc.flipY (false); 


4.2.3 cc.Show 和 cc .Hide 


几乎 所 有 即时 动作 的 实现 都 是 直接 修改 其 对 应 的 属性 ，cc .snow 和 cc .Hide 也 不 例外 。 
cc.Show 和 cc .Hide 通 过 修改 节点 的 visiple 属 性 来 达到 显示 和 隐藏 的 功能 , 通过 下 列 代 码 可 以 
创建 一 个 显示 或 隐藏 的 动作 : 


1 var show = cc.show(); // 创建 一 个 [显示 ] 动 作 
2 var hide = cc.hide(); // 创建 一 个 [隐藏 ] 动作 


4.2.4 cc.ToggleVisibility 


cc.ToggleVisibility 动 作 可 以 切换 节点 的 可 视 (Visible ) 属性 ， 当 节点 可 见 时 ， 运 行 
此 动作 ， 则 节点 会 被 隐藏 ， 反 之 同 理 。 创 建 cc.Togglevisibility 动 作 的 代码 如 下 : 


1 var toggleVisibility = cc.toggleVisibility(); 


4.2.5 cc.RemoveSelf 


顾名思义 ，cc .RemoveSelf 就 是 将 正在 运行 此 动作 的 节点 从 父 节 点 移 除 ， 它 实际 上 是 调用 
了 tardet (正在 运行 此 动作 的 节点 ) 的 removeFromParent (isNeedCleanUp) 内 函数 。 你 可 以 在 
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cc.RemoveSelf 的 upaate 国 数 中 看 到 如 下 代码 : 


1 update:function(dt){ 
2 this.target.removeFromParent (this._ isNeedCleanUp); 


cc .RemoveSelf 类 中 声明 了 一 个 属性 _isNeedcleanUp, 该 属性 默认 为 crue,， 表示 目标 节 
点 以 及 它 所 关联 的 动作 、 调 度 避 等 都 将 被 移 除 。 若 _isNeedCleanUp 为 false， 则 只 移 除 目 标 
节点 。 

cc.RemoveSelf 的 构造 函数 是 一 个 有 参 构造 函数 ， 因 为 _isNeedcleanUp 的 默认 值 为 
true， 所 以 在 实际 开发 中 可 以 省 略 这 个 参数 ， 相 关 代码 如 下 : 


1 var moveSelf 
2 var moveSelf 


cc.removeSelf(); // 等 同 于 cc.removeSelf (true) 
cc.removeSelf (false); 


4.2.6 cc.CallFun 


cc.callFunc 是 即时 动作 中 较为 特殊 的 一 种 , 它 将 一 个 函数 包装 成 动作 ， 当 节点 运行 此 动作 
的 时 候 ， 便 会 回调 此 函数 。 通 常情 况 下 ，cc .callFun 会 结合 复合 动作 使 用 。 例 如 ， 主 角 2 秒 内 
移动 到 屏幕 (100, 200) 后 ， 说 了 一 句 :“ 我 已 到 达 指 定 地 点 。” 那 么 ， 这 个 功能 的 实现 代码 如 下 : 

1 var moveTo = cc.moveTo(2, cc.p(100, 200)); 

2 var callback = cc.callFunc (function(){ 

3 cc.10g ("我 已 到 达 指 定 地 点 。"); 

4 }.bind(this)); 

5 node.runAction(cc.sequence (moveTo, callback)); 


说 明 瞬时 动作 的 实现 比较 简单 ， 若 读者 感 兴趣 ， 可 自行 查阅 各 类 动作 的 update 函 数 。 瞬 时 动 
作 一 般配 合 复合 动作 使 用 。 


4.3 ”持续 动作 


需要 持续 一 定时 间 才 能 完成 的 动作 称 为 持续 动作 ， 例 如 花 2 秒 的 时 间 让 精灵 移动 到 屏幕 坐标 
(300, 200) 的 位 置 。 由 于 持续 动作 需要 持续 一 段 时 间 才 能 完成 , 所 以 所 有 的 持续 动作 都 需要 接收 一 
个 用 于 控制 动作 执行 时 间 的 参数 duration。 

大 部 分 的 持续 动作 可 以 分 为 两 种 一 一 xxTo 和 xxBy， 前 者 表示 最 终 值 ， 而 后 者 表示 相对 改变 
值 。 例 如 ， 用 1 秒 的 时 间 将 节点 移动 到 屏幕 坐标 (-20, 50) 的 位 置 ， 则 代码 如 下 面 的 第 1 行 所 示 ; 车 
证 节点 相对 当前 坐标 进行 X 轴 偏 移 -20，Y 轴 偏 移 30， 则 代码 应 该 如 下 面 第 2 行 所 示 : 


cc.moveTo(1, cc.p(-20, 50)); 
ce.moveBy (1, cc.p(-20, 50)); 


1 var moveTo 
2 var moveBy 


根据 持续 动作 的 作用 不 同 ， 我 们 将 持续 动作 分 为 属性 变化 动作 和 视觉 特效 动作 两 大 类 。 
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4.3.1 属性 变化 动作 
属性 变化 动作 ， 即 运行 动作 的 过 程 中 会 改变 节点 对 应 属性 的 动作 ， 它 们 大 概 有 如 下 几 种 。 


1. cc.MoveTo 和 cc.MoveBy 
Move 动 作 使 节点 做 直线 运动 ， 通 常用 来 移动 游戏 内 的 角色 等 ， 其 函数 原型 如 下 


1 cc.moveTo(duration, position, y); 
2 cc.moveBy (duration, position, y); 


其 中 , 参数 auration 为 持续 时 间 , position 可 以 为 cc .p(x,y) 类 型 的 值 , 也 可 以 为 坐标 的 x 值 。 
当 position 为 cc .p(x，y) 时 , y 可 以 省 略 。 示 例如 下 : 


1 // 用 时 1 秒 ， 将 节点 移动 到 屏幕 (128, 80) 的 位 置 

2 var moveTo = cc.moveTo(1，cc.p(125，80)); // 等 同 于 cc.moveTo(1, 125, 80); 
3 // 用 时 1 秒 ， 节 点 相对 当前 坐标 ，X 轴 向 左 移动 88，Y 轴 向 上 移动 99 

4 var moveBy = cc.moveBy(1，cc.p(-88，99)); // 等 同 于 cc.moveBy(1，-88，99) ， 


2. cc.JumpTo 和 cc .JumpBy 
Jump 动 作 以 一 定 的 轨迹 让 节点 跳跃 到 指定 的 位 置 ， 其 API 如 下 : 


1 cc.jumpTo(duration, position, y, height, jumps); 
2 cc.jumpBy (duration, position, y, height, jumps); 


可 以 发 现 ， 形 参 中 也 有 position， 这 意味 着 若 传人 进去 的 参数 为 cc.p (x, y) 类 型 的 参数 ， 
则 y 同 样 可 以 省 略 。heignt 为 跳跃 高 度 ，jumps 为 跳跃 的 次 数 。 示 例如 下 : 


//【 举 例 】: 1 秒 时 间 ， 跳 到 (100, 86)， 跳 路 高 度 为 50 像 素 ， 总 共 跳 跃 4 次 
var jumpTo = cc.jumpTo(1, cc.p(100, 86), 50, 4); 

//【 举 例 】: 1 秒 时 间 ， 原 地 跳 ， 跳 路 高 度 为 100 像 素 ， 总 共 跳跃 4 次 
var jumpBy = cc.jumpBy (1, cc.p(0, 0), 100, 4); 
node.runAction(cc.sequence (jumpTo, jumpBy)); 


器 ODP 


说 明 cc .sequence 动 作 将 一 组 动作 包装 成 一 个 序列 ， 然 后 挨个 执行 ， 具 体 见 4.3 节 。 


3. cc.BezierTo 和 cc.BezierBy 


Bezier 动 作 可 以 让 节点 做 曲线 运动 ， 而 曲线 则 由 贝 塞 尔 曲线 描 述 。 贝 塞 尔 曲线 又 称 贝 效 曲线 
或 贝 济 埃 曲 线 ， 是 应 用 于 二 维 图 形 应 用 程序 的 数学 曲线 。 


每 条 贝 塞 尔 曲线 都 包含 一 个 起 点 和 一 个 终点 。 在 一 起 点 起 点 控制 点 
条 曲线 中 , 起 点 和 终点 各 自 包含 一 个 控制 点 ， 而 控制 点 
到 起 点 (或 终点 ) 的 连 线 称 作 控制 线 ， 所 以 每 条 贝 塞 尔 
曲线 应 该 有 两 条 控制 线 和 两 个 控制 点 。 控 制 点 和 起 点 
(或 终点 ) 的 角度 以 及 长 度 决 定 了 曲线 的 形状 ， 如 图 4-2 终点 控制 点 终点 
所 未。 图 4-2 贝 塞 尔 曲线 
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Bezier 动 作 的 API 如 下 : 


cc.bezierTo(duration, control); 
2 cc.bezierBy (duration, control); 


其 中 ，control 参 数 为 贝 塞 尔 曲 线 的 描述 信息 ， 它 接收 三 个 点 坐标 , 分 别 是 起 点 控制 点 、 终 
点 控制 点 、 终点。 所 以 ， 当 你 需要 创建 一 个 Bezier 动 作 时 ,应 该 先 配置 好 贝 塞 尔 曲线 的 描述 信息 ， 
就 像 下 面 这 样 : 


1 var size = cc.winSize; 

2 // 【举例 】: 

3 // 条 件 : 当前 节点 坐标 为 cc.p(0，0) 

4 // 要 求 : 用 1 秒 时 间 做 贝 塞 尔 曲线 运动 ， 将 节点 从 当前 位 置 移动 到 屏幕 右 下 角 
5 var bezierToConfig = [ 

6 cc.p(0, size.height), // 起 点 控制 点 

7 cc.p(size.width, size.height), // 终点 控制 点 

8 cc.p(size.width, 0) // 终点 

9 


ly; 


var bezierTo = cc.bezierTo(1, bezierToConfig); 


0 
. 
2 //【 举 例 】: 
3 // 条 件 : 当前 节点 坐标 为 cc.p(cc.winSize.width,，0) 
14 // 要 求 : 用 1 秒 时 间 做 相对 贝 塞 尔 曲线 运动 ， 将 X 轴 往 负 方向 移动 到 屏幕 宽度 的 一 半 
15 var bezierByConfig = [ 
6 cc.p(0, size.height), 
3 cc.p(-size.width / 2, size.height), 
8 cc.p(-size.width / 2, 0) 
9 
0 


] 3 
Var bezierBy = cc.bezierBy(1, bezierByConfig); 
node.runAction(cc.sequence (bezierTo, bezierBy)); 


实际 上 ， 在 Adobe Photoshop 中 ,钢笔 工具 就 是 贝 塞 尔 曲 线 的 应 用 。 所 以 ， 在 开发 中 ， 我们 可 
以 利用 Adobe Photoshop 的 钢笔 工具 调 出 贝 塞 尔 曲线 ， 然 后 将 参数 搬 到 代码 中 ， 即 可 得 到 你 想 要 的 
Bezier 动 作 。 


4. cc.ScaleTo 和 cc.ScaleBy 
Scale 动作 可 以 让 节点 在 指定 的 时 间 内 进行 缩放 ， 其 API 如 下 : 


1 cc.scaleTo(duration, sx, sy); 
2 cc.scaleBy (duration, sx, sy); 


可 以 发 现 ， 除 了 guration 参数 之 外 ， 还 有 sx 和 sy 这 两 个 参数 ， 它 们 分 别 表示 X 轴 和 Y 轴 上 
的 缩放 。 但 是 在 实际 开发 中 ， 更 多 的 需求 是 对 整个 节点 进行 缩放 ， 所 以 ， 你 只 需 指 定 一 个 整体 
缩放 系数 即 可 。 这 使 得 sy 参数 必定 成 为 一 个 可 以 省 略 的 参数 ， 当 sy 省 略 时 ，cc.scaleTo 或 
cc.ScaleBy 的 _endSscaleY 属 性 会 被 强制 设置 为 sx 的 值 ， 这 样 便 可 实现 X 轴 和 Y 轴 的 缩放 比例 
一 致 。 


下 面 通 过 一 个 示例 来 学 习 下 Scale 动作 的 用 法 ， 代 码 如 下 : 
1 //【 举 例 】: 用 1 秒 的 时 间 ， 把 图 片 缩放 到 【原始 】 大 小 的 50% 


2 Var scaleTo = cc.scaleTo(1, 0.5); 
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3  // 【举例 】: 用 1 秒 的 时 间 ， 把 图 片 缩放 到 【当前 】 大 小 的 200% 

4 var scaleBy = cc.scaleBy(1，2): 

5 //【 举 例 】: 用 1 秒 的 时 间 ， 把 x 方向 缩放 到 【原始 】 大 小 的 50%， y 方 向 缩放 到 【原始 】 大 小 的 150% 
6 Var Scale = cc.scaleBy(1, 0.5, 1.5); 

7 Var scaleReverse = scale.reverse(); 

8 node.runAction(cc.sequence(scaleTo, scaleBy, scale, scaleReverse)); 

5. cc.RotateTo 和 cc.RotateBy 


Rotate 动 作用 于 旋转 节点 ， 其 API 如 下 : 


1 cc.rotateTo(duration, deltaAnglex, deltaAngleY); 
2 cc.rotateBy (duration, deltaAnglex, deltaAngleY); 


和 Scale 类 似 ，cc .rotateTo (或 cc .rotateBy ) 的 deltaAangleY 也 是 可 省 略 的 。 下 面 通过 


几 个 例子 来 介绍 一 下 Rotate 动 作 的 用 法 ， 代 码 如 下 : 


//【 举 例 】: 用 1 秒 的 时 间 ， 将 X 轴 旋转 到 -90 度 ，Y 轴 旋转 到 -45 度 
Var rotate = cc.rotateTo(1, -90, -45); 

// 【举例 】: 用 1 秒 的 时 间 ， 整 体 旋转 到 90 度 

Var rotateTo = cc.rotateTo(1, 90); 

//【 举 例 】: 用 1 秒 的 时 间 ， 基 于 【当前 】 的 角度 整体 旋转 -90 度 
Var rotateBy = cc.rotateBy(11，-90): 


值得 注意 的 是 ， 在 Cocos2d-JS 中 ， 垂 直 X 轴 向 上 表示 0 度 ， 垂 直 Y 轴 向 右 表 示 90 度 。 


4.3.2 ”视觉 特效 动作 


视觉 特效 动作 可 以 使 节点 实现 一 些 视 觉 效 果 ， 常 见 的 视觉 效果 有 淡 和 入、 淡出、 闪烁 、 帧 动 


画 等 。 


化 ， 


1. cc.FadeIn、cc.Fadeout 和 cc.FadeTo 


cc.FadeIin 和 cc.Fadeout 用 来 实现 节点 的 淡 入 淡出 效果 ，cc.FaaqeTo 实 现 节点 的 透明 度 变 
其 API 如 下 : 


7 


cc.fadeIn(duration); 
cc.fadeOut (duration); 
cc.fadeTo(duration, opacity); 


中 

2 

3 

示例 代码 如 下 : 

//【 举 例 】: 用 1 秒 的 时 间 淡 出 


Var fadeOut = cc.fadeOut (1); 

//【 举 例 】: 用 1 秒 的 时 间 淡 入 

var fadqdeIn = cc.faqeIn(1) 

/7/ 【举例 】: 用 1 秒 的 时 间 疼 透明 度 渐 变 到 半 透 明 (128) 

var fadeTo = cc.fadeTo(1, 128); 
node.runAction(cc.sequence (fadeOut, fadelIn, fadeTo)); 
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. cc.TintTro 和 cc .mintBy 


Tint 动 作 使 节点 发 生 色 调 变 化 ， 在 实际 开发 中 ， 此 动作 比较 少 用 ， 其 API 和 示例 如 下 : 
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1 cc.tintTo(duration, deltaRed, deltaGreen, deltaBlue); 
2 cc.tintBy (duration, deltaRed, deltaGreen, deltaBlue); 


其 中 deltaRed、deltaGreen 和 deltaBlue 分 别 表示 红色 分 量 、 绿 色 分 量 以 及 蓝 色 分 量 。 示 例 
如 下 : 


//【 举 例 】: 用 1 秒 的 时 间 ， 红 色 和 蓝 色 分 量 升 到 255， 绿 色 分 量 降 到 0 

var tintTo = cc.tintTo(1, 255, 255, 0); 

// 【举例 】: 用 1 秒 的 时 间 ， 基 于 【当前 】 的 颜色 分 量 值 ， 红 色 和 蓝 色 分 量 不 变 ， 绿 色 分 量 上 升 255 
var tintBy = Co.tintBy(1, 0, 0, 255); 

node.runAction(cc.sequence (tintTo, tintBy)); 

var fadeTo = cc.fadeTo(1, 128); 

node.runAction(cc.sequence(fadeOut, fadeIn, fadeTo)); 
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3.cc.Blink 


Blink 动 作 使 节点 发 生 闪 烁 ， 例 如 人物 掉 血 闪烁 效果 就 是 基于 此 动作 实现 的 ， 其 API 如 下 : 
1 cc.blink(duration, blinks); 

示例 如 下 : 

1 //【 举 例 】: 1 秒 时 间 ， 闪 烁 10 次 


2 var actionBlink = cc.blink(1, 10); 
3 node.runAction(actionBlink); 


4.cc.Animation 


实际 上 ， 精 灵 可 以 实现 帧 动画 效果 。 帧 动画 的 原理 是 将 一 组 连续 的 动画 分 解 成 帧 ， 每 一 帧 就 
是 一 张 纹理 ， 然 后 通过 指定 的 时 间 间 隔 将 这 些 动画 连续 播放 出 来 ， 从 而 形成 帧 动画 ， 这 类 似 于 胶 
片 电影 。 


在 Cocos2d-JS 中 ， 帧 动画 用 cc .Animate 表 示 ， 其 创建 方式 如 下 : 

1 var animation = new cc.Animation(frames, delay, loops); 
其 中 ，frames 是 一 个 数组 ， 里 面 存放 着 所 有 要 播放 的 帧 ，aelay 为 每 帧 播放 的 时 间 间 隔 ，loops 
为 帧 动画 循环 播放 次 数 。 不 过 ， 这 里 的 参数 也 都 是 可 以 省 略 的 。 

帧 动画 的 实现 又 分 为 两 种 ， 其 一 为 直接 通过 图 片 文件 的 方式 ， 其 二 为 plist 精 灵 表 单 ( 制作 方 
式 见 第 11 章 )。 通 过 图 片 文件 直接 创建 的 方式 如 下 : 


1 var animation = new cc.Animation(); // 创建 动画 

2 animation.addSpriteFrameWithFile(res.sh node 64 png); 

3 animation.addSpriteFrameWithFile(res.sh node 128 png); 

4 animation.addSpriteFrameWithFile(res.sh node 256 png); 

5 animation.addSpriteFrameWithFile(res.sh node 512 png); 

6 animation.setDelayPerUnit (0.15); // 设置 [ 帧 间隔 ] 

7 animation.setRestoreOriginalFrame (true) // 设置 [是 否 恢复 到 第 一 帧 ] 

8 

9 var animate = cc.animate(animation); // 通过 cc.animate 将 animation 包 装 成 动作 
1 


0 node.runAction(animate); 


上 述 代 码 第 1 行 创建 了 一 个 不 带 参 数 的 cc.Animation， 第 2 行 到 第 5 行 代码 通过 
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addSspriteFrameWithFile 方 法 添加 了 4 帧 动画 。 第 6 行 代 码 设置 帧 动画 间隔 为 0.15 秒 ， 第 7 行 代 
码 设置 动画 播放 结束 后 回 到 第 一 帧 。 最 后 ， 第 9 行 代 码 通过 cc . animate 卫 数 将 animation 对 象 

在 实际 开发 中 ， 很 少 直 接 通过 图 片 文件 的 方式 创建 帧 动画 。 首 先 ， 直 接 通过 图 片 文件 创建 的 
方式 占用 的 内 存 较 大 ( 见 第 11 章 )， 其 次 零散 的 帧 较 难 维护 。 所 以 ， 对 于 一 般 帧 动画 ， 我 们 更 多 
会 考虑 使 用 plist 精 灵 表 单 的 方式 创建 ， 相 关 代码 如 下 : 


1 cc.SsSPriteFrameCache .adqdqSpriteFrames (res.u5_ dance plist, res.u5 dance png); 
// 添加 帧 缓存 

2 var node = new cc.Sprite("#dance_0.png"); // 创建 节点 
3 this.addChild(node); 

4 node.setPosition(568, 320); 

5 var frames = []; 
6 
7 
8 


for (var i = 0; i < 13; i++) { 


Var str = "dance "+i+".png"; // 注意 : 这 里 不 需要 加 # 号 
Var frame = cc.spriteFrameCache.getSpriteFrame (str); 
9 frames.push (frame); 
10 } 
11 var animation = new cc.Animation(frames, 0.15); 
12 animation.setRestoreOriginalFrame (true); // 设置 [是 否 恢复 到 第 一 帧 ] 
13 var animate = cc.animate (animation); // 用 cc.animate 将 animation 包 装 成 动作 


14 node.runAction(animate); 

首先 , 你 需要 像 上 述 代码 的 第 1 行 那样 ， 将 plist 文 件 以 及 plist 文 件 所 对 应 的 图 片 加 载 到 帧 缓存 
中 ， 然 后 根据 帧 创建 精灵 。 从 第 $ 行 代码 开始 配置 frames 数 组 ， 其 余部 分 与 直接 通过 图 片 文 件 创 
建 的 方式 一 致 。 


4.3.3 复合 动作 


复合 动作 将 各 种 普通 动作 组 合 起 来 ,产生 更 为 复杂 多 变 的 效果 。 例 如 ,心脏 跳动 效果 ， 就 是 
多 个 Scale 动作 的 组 合 。 复 合 动作 也 是 一 个 动作 ， 所 以 同样 通过 node .runAction 的 方式 执行 。 


1. cc.DelayTime 

cc .DelayTime 为 延 时 动作 ， 类 似 多 线程 中 的 睡眠 ， 在 这 一 段 时 间 中 ， 它 什么 也 不 做 ， 只 是 
起 到 延 时 作用 。 

另外 ， 更 为 准确 地 说 ，cc.DelayTime 动 作 并 不 是 复合 动作 ， 但 是 在 开发 中 ， 它 只 和 全 
合 动作 使 用 。cc.DelayTime 的 API 如 下 : 

1 cc.delayTime (duration); 

下 面 举 个 例子 : 


//【 举 例 】: 延 时 0.5 秒 ， 将 节点 的 X 轴 坐标 左 移 100 像 素 

var delay = cc.delayTime (0.5); 

Var moveBy = cc.moveBy(1, cc.p(-100, 0)); 

Var sequence = cc.sequence(delay, moveBy); 
node.runAction(sequence); 
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2. cc .Repeat 和 cc .RepeatForever 


cc .Repeat 将 动作 重复 执行 指定 的 次 数 ， 而 cc .RepeatForever 则 表示 将 动作 无 限 重 复 执 


行 ， 示例 如 下 : 
1 // 【举例 】: 用 时 0.5 秒 ， 节 点 旋转 -90 度 ， 重 复 4 次 


2 var rotate = cc.rotateBy(0.5, -90); 

3 var repeat = rotate.repeat (4); // 重复 4 痰 
4 node.runAction (repeat); 

5 //【 举 例 】: 用 时 0.5 秒 ， 节 点 旋转 -90 度 ， 一 直 重 复 执行 
6 var rotate = cc.rotateBy(0.5, -90); 
7 

8 

3 


3 
Var repeat = rotate.repeatForever(); // 一 直 重 复 
node.runAction(repeat); 


.Cc.Sequence 


cc .Sequence 是 一 个 序列 动作 ,其 作用 是 将 一 组 普通 动作 包装 成 一 个 
个 个 执行 。 所 以 ，cc .Sequence 的 动作 是 有 先后 顺序 的 ， 其 API 如 下 : 
1 cc.sequence(actionl, action2, action3, ...); 


可 以 看 出 ，cc .sequence 的 参数 是 个 不 定 参 数 ， 示 例如 下 : 


Var moveBy = cc.moveBy (0.5, cc.p(-100, 0)); 

Var blink = cc.blink(0.5, 8); 

Var Scale = cc.scaleTo(0.5, 1.5); 

Var rotate = cc.rotateTo(0.5, 90); 

Var sequence = cc.sequence(blink, moveBy, scale, rotate); 
node.runAction (sequence); 


OODODP 


4. cc .Spawn 


序列 , 然后 按照 顺序 一 


//【 举 例 】: 每 个 动作 耗 时 0.5 秒 ， 先 后 按 顺 序 执行 了 移动 、 闪 烁 、 缩 放 和 旋转 4 个 动作 


cc.Spawn 是 一 个 并 行动 作 ， 即 同时 并 发 执行 所 有 被 包含 在 cc. Spawn 里 面 的 动作 ， 所 以 ， 
cc.Spawn 里 面包 含 的 动作 不 用 像 cc .sequence 那 样 注意 顺序 , 而 且 可 以 随意 放置 。 其 API 如 下 : 


1 cc.spawn(actionl, action2, action3, ...); 


下 面 依旧 举 一 个 例子 ， 让 你 更 容易 理解 : 


1 //【 举 例 】: 两 个 动作 并 发 执行 。 其 一 :用 1 秒 的 时 间 ， 节 点 的 X 轴 坐标 左 移 200。 其 二 : 用 时 0.5 秒 ， 闪 烁 8 次 


Var moveBy = cc.moveBy(1, cc.p(-200, 0)); 
Var blink = ce;blink(0.5, 8); 

var spawn = cc.spawn(blink, moveBy); 
node.runAction (spawn); 


4.4 ”变速 动作 


ROD 


变速 动作 可 以 让 指定 的 持续 动作 发 生 速 度 上 的 变化 ,分 为 两 种 一 一 


和 非 线 性 变化 动作 cc .ActionEase。 


4.4.1 cc.Speed 
cc .Speed 为 线性 变速 动作 ， 其 API 如 下 : 


线 怕 


FE 变 化 动作 cc. Speed 
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1 cc.speed(action, speed); 
其 中 action 为 要 发 生变 速 的 动作 ，speed 为 发 生变 速 的 倍数 。 下 面 举 一 个 例子 : 
//【 举 例 】: 用 时 0.5 秒 ， 节 点 旋转 -90 度 ， 重 复 4 次 ， 速 度 为 原来 的 5 倍 


Var rotate = cc.rotateBy(0.5，-90): 
Var repeat = rotate.repeatForever(); 
Var Speed = cc.speed(repeat, 5); 
node.runAction (speed); 
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4.4.2 cc.ActionEase 


cc.ActionEase 使 动作 发 生 非 线性 速度 变化 。cc .ActionEase 动 作 分 为 5 类 : 指数 缓冲 、 
Sine 缓 冲 、 弹 性 缓冲 、 跳 跃 缓冲 和 回 震 缓 冲 。 每 类 又 可 细 分 为 m、Out 和 InOut 三 种 ， 所 以 
cc.ActionEase 动 作 总 共 为 15 个 。 


cc.ActionEase 动 作 使 用 起 来 比较 简单 ， 下 面 以 ElasticIn 为 例 进行 介绍 : 
//【 举 例 】: 用 2 秒 时 间 ， 携 带 弹 性 缓冲 效果 ， 让 节点 的 X 轴 坐标 向 左 移动 300 像 素 


Var moveTo = cc.moveBy(2, cc.p(300, 0)); 
var elasticInMoveTo = moveTo.easing(cc.easeElasticIn()); 
node.runAction(elasticInMoveTo); 


所 有 cc.ActionEase 动 作 的 实现 都 类 似 上 述 代 码 的 第 三 行 ， 其 格式 为 action.easing 
(cc.easeXXX1())。 图 4-3 为 Cocos2d-JS 各 种 变速 动作 曲线 示意 图 。 


大 ODP 


引 数 缓冲 


cc.easeExponentialIn cc.easeFExponentialOut cc.easeExponentialInOut 


Sine 缓 促 


cc.easeSineIn cc.easeSineOut cc.easeSineInOut 


图 4-3 ”Cocos2d-JS 各 种 变速 动作 曲线 示意 图 
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弹性 缓冲 


lastierrnOut 


可 


Go, ase 


lasticOut 


可 


CC .easSe] 


lasticIn 


CCGSeaSel 


跳跃 缓冲 


cc.easeBounceOut cc.easeBounceInOut 


cc.easeBouncelIn 


回 震 缓冲 


cc.easeBackOut cc.easeBackIinOut 


cc.easeBackIin 


( 续 ) 


图 4-3 
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4.5 ”实例 一 一 让 《保卫 葛 卜 2》 的 主 鹤 面 动 起 来 


在 上 一 章 中 ,我们 创建 完 《 保 卫 葛 卜 2》 主 页 面 上 的 所 有 节点 ， 并 且 正 确 摆 放 好 了 坐标 以 及 
层级 ,现在 结合 本 章 所 学 到 的 知识 ， 是 不 是 可 以 让 《保卫 萝卜 2》 主 页 面 动 起 来 呢 ?” 现 在 我 们 动 
手 开发 吧 ! 


图 4-4 《保卫 葛 卜 2》 主 页 面 


在 开发 之 前 ， 请 原谅 我 将 怪物 编号 写 到 图 4-4 中 ， 虽 然 这 看 上 去 有 点 丑 ， 但 是 有 助 于 你 更 清 
晰 地 理解 。 从 《保卫 萝卜 2》 上 线 作 品 中 得 知 ，1 号 和 5 号 怪物 运行 的 动作 为 左右 来 回 运 动 。2 号 怪 
物 运 行 的 动作 是 冲 出 来 之 后 做 上 下 浮动 。3 号 、4 号 和 6 号 怪物 也 是 一 直上 下 浮动 ，6 号 怪物 的 手 做 
的 是 旋转 运动 ， 剩 下 一 个 萝卜 为 贝 塞 尔 曲 线 运动 。 除 了 2 号 怪物 的 冲 出 动作 和 萝卜 的 动作 之 外 ， 
其 他 怪物 运行 的 动作 都 是 无 限 重复 执行 。 

我 在 MMMainLayer 类 中 定义 了 一 个 actionpuration 属 性 作为 所 有 节点 动作 的 时 间 基 数 ， 
你 可 以 通过 更 改 此 值 来 加 快 或 放 慢 整个 当前 层 中 所 有 节点 的 动作 速度 ， 相 关 代码 如 下 : 


1 var MMMainLayer = cc.Layer.extend({ 

2 actionDuration : 1, // 时 间 基 数 [ 页 面 上 所 有 节点 运行 的 动作 ] 
3 ctor : function(){ 

4 this._super(); 

5 pe 

6 } 

A 


然后 ， 以 “帮助 ”按钮 为 例 ， 在 MMMainLayer 的 10adHelp () 函数 中 追加 “帮助 ”按钮 的 运 
行动 作 ， 相 关 代码 如 下 : 
1 // 加 载 [帮助 ] 
loadHelp : function(){ 


2 
3 var helpBody = new cc.Sprite("res/MainMenu/front monster 6.png"); 
4 prs 


80 第 4 章 动作 模块 


5 // 上 下 移动 

6 Var helpBodyMoveByl = cc.moveBy (this.actionDuration * 2, cc.p(0, 5)); 
7 Var helpBodyMoveBy2 = cc.moveBy (this.actionDuration * 2, cc.p(0, -5)); 
8 Var helpBodySeq = cc.sequence (helpBodyMoveByl1, helpBodyMoveBy2); 

9 Var helpBodyAction = helpBodySeq.repeatForever () ; 

10 helpBody .runAction (helpBodyAction); 

a A pe 

12 } 


在 第 6 行 和 第 7 行 代码 中 ， 我 们 创建 了 两 个 互补 的 movepy 动 作 ， 时 间 为 actionDuration 基 
数 的 2 倍 ， 位 移 为 Y 轴 方向 上 上 下 5 个 像素 。 第 8 行将 这 两 个 动作 包 成 一 个 cc.Sequence 类 型 的 序 
列 动作 nelpBodySeqg 第 9 行 通过 调用 helpBodySeq.repeatForever () 图 数 得 到 一 个 无 限 循环 
的 序列 动作 hnelpBodyAction, 第 10 行 运行 helpBodyAction,， 人 “帮助 ”按钮 一 直上 下 
浮动 的 动作 效果 。 


其 他 怪物 的 动作 也 和 “帮助 ”按钮 大 同 小 异 ， 稍 有 不 同 的 便 是 2 号 怪物 。2 号 怪物 运行 的 是 一 
个 冲 出 来 之 后 做 上 下 浮动 的 动作 ， 此 时 可 以 考虑 将 这 个 动作 分 成 两 个 步 又 来 做 ， 先 运行 冲 出 的 动 
作 ， 然 后 再 做 上 下 浮动 。 那 么 ， 此 动作 也 是 一 个 复合 动作 ， 代 码 如 下 : 


1 // 加 载 5 号 和 2 号 [怪物 ] 

2 loadForeMonster : function()f{ 

3 var leftCambridgeBlue = new cc.Sprite("res/MainMenu/front monster 2.png"); 

4 0 

5 // 上 下 移动 

6 Var action0 = cc.moveTo(this.actionDuration * 0.2, cc.p(cc.winSize.width / 
2 20 IO 

7 Var actionl = cc.sequence(action0, cc.callFunc (function () { 

8 Var blueMoveBy1 = cc.moveBy (this.actionDuration * 0.55, cc.p(0, -5)); 

9 var blueMoveBy2 = cc.moveBy (this.actionDuration * 0.55, cc.p(0, 5)); 

小 六 Var blueSeq = cc.sequence (blueMoveByl, blueMoveBy2); 

EL Var blueAction = blueSeq.repeatForever () ; 

1 leftCambridgeBlue.runAction (blueAction); 

ne: }, this)); 

14 leftCambridgeBlue.runAction(actionl); 

9 3 


除 此 之 外 ， 就 剩 下 葛 卜 的 动作 比较 特殊 一 些 了 ， 它 是 一 个 贝 塞 尔 曲线 加 缩放 并 行 运动 。 在 运 
行动 作 之 前 ， 应 当 将 萝卜 缩放 至 原始 大 小 的 0.7 倍 ， 然 后 再 运行 复合 动作 ， 相 关 代码 如 下 : 


1 // 加 载 [ 莫 卜 ] 

2 loadCarrot : function(){ 

3 Var node = new cc.Sprite("res/MainMenu/front_ carrot .png" ) 
4 和 

5 // 草 下 ,， 贝 塞 尔 曲 线 + 缩放 运动 

6 node.setScale(0.7); 

7 node.setPosition(cc.winSize.width / 2 + 320, 120); 

8 Var controlPointsTo = [ 


9 cc.p(cc.winSize.width / 2 + 400，100)， // 起 点 控制 点 
10 cc.p(cc.winSize.width / 2 + 120，0)， // 终点 控制 点 
11 cc.p(cc.winSize.width / 2 + 100，20)]; // 终点 


2 Var bezierTo = cc.bezierTo(this.actionDuration * 0.8, controlPointsTo); 
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13 Var ScaleTo = cc.scaleTo(this.actionDuration * 0.8, 1); 
14 Var spawn = cc.spawn (bezierTo, scaleTo); 

15 node.runAction (spawn); 

6 


其 余 动作 都 像 “ 帮 助 ”按钮 的 动作 那样 简单 ， 也 都 是 差不多 重复 的 代码 ， 详 情 可 参看 随 书 
代码 。 


4.6 小结 


通过 本 章 的 学 习 ， 我 们 知道 了 在 Cocos2d-JS 中 ， 大 部 分 的 动作 可 分 为 瞬时 动作 和 持续 动作 ， 
瞬时 动作 在 一 帧 内 完成 ， 而 持续 动作 则 会 持续 一 段 时 间 。 除 此 之 外 ，Cocos2d-JS 提 供 了 复合 和 变 
速 等 动作 ， 你 可 以 把 简单 的 动作 通过 复合 动作 再 构成 一 个 复杂 的 动作 ， 并且 复 合 动 作 
cc.Sequence 将 一 组 普通 动作 包装 成 一 个 序列 ， 然 后 按照 顺序 挨个 执行 。 而 cc .Spawn 是 同时 并 
发 执行 所 有 包含 在 cc .spawn 里 面 的 动作 ， 不 需要 注意 动作 放置 进去 的 先后 顺序 。 最 后 ， 在 本 章 
的 实例 中 ， 我 们 让 《保卫 莹 卜 2》 的 主页 面 动 了 起 来 。 


4.7 参考 资源 


本 章 的 参考 资源 为 Cocos2d-x 官 方 文档 ( 动作 篇 ): http://www.cocos.com/doc/article/index? 
type=cocos2d-x&url =/doc/cocos-docs-master/manual/framework/native/v3/action/zh.md。 


事件 机 制 


随 着 软件 和 硬件 的 迅速 发 展 ， 游 戏 所 能 达到 的 效果 也 越 来 越 接近 电影 了 ， 游 戏 和 电影 一 样 ， 
都 可 以 有 动人 的 故事 情节 以 及 炫丽 的 动作 特效 等 。 但 是 , 游戏 和 电影 义 有 着 很 大 的 区 别 , 其 中 最 
大 的 区 别 就 是 游戏 需要 和 用 户 交 互 。 用 户 交互 是 游戏 的 根本 ,其 至 可 以 说 , 没有 用 户 交 互 ， 就 没 


有 游戏 。 用 户 交 互 可 以 是 触摸 屏幕 、 重 力 感应 、 键 盘 响 应 和 鼠标 响应 等 ， 而 这 些 在 游戏 中 都 属于 


有 件 。 

本 章 内 容 : 
口 事件 
口 事件 管理 器 
口 触摸 事件 
口 加 速 计 事件 
口 键盘 事件 
口 鼠标 事件 
口 自 定 义 事件 
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5.1 事件 


口 实例 一 一 虚拟 播 杆 者 


se 
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Cocos2d-JS 为 处 理事 件 封装 了 3 个 相关 的 类 ， 每 个 事件 的 处 理 都 是 由 这 三 个 部 分 组 成 ， 它 们 
分 别 是 cc .Event ( 事件 对 象 )、 cc.EventListener ( 事件 监听 需 ) 和 cc .EventManager ( 事 
件 管理 器 )。cc.Event 对 象 携带 着 事件 相关 的 信息 ,例如 事件 类 型 、 事 件 回 调 函 数 等 。 
cc.BventListener 封 装 了 用 户 的 事件 处 理 逻 辑 , 而 cc .EventManager 则 管理 用 户 注 册 的 事件 


品 


监听 锅 ， 根 据 触发 的 寻 


丰 件 类 型 分 发 给 相应 的 事件 监听 需 。 


每 个 事件 的 事件 源 可 以 是 层 、 精 灵 、 菜 单 等 节点 对 象 , 事件 的 逻辑 处 理 都 在 各 个 事件 监听 器 
(cc.EventListener ) 中 。 每 个 事件 监听 器 都 需要 被 添加 到 事件 管理 器 中 ， 这 使 得 当 有 事件 被 
触发 时 ,事件 管理 器 能 够 根据 事件 的 类 型 把 事件 分 发 给 相应 的 事件 监听 器 ,事件 监听 器 收 到 事件 
之 后 ， 开 始 处 理事 件 的 业务 逻辑 。 
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Cocos2d-JS 提 供 了 5 种 事件 监听 器 ， 它 们 的 继承 关系 如 图 5-1 所 示 。 


EventListener 


EventListenerTouch EventListenerKeyboard EventListenerAcceleration 
EventListenerMouse EventListenerCustom 


图 5-1 事件 监听 器 的 继承 关系 


说 明 在 Cocos2d-x 中 ， 有 事件 分 发 器 的 概念 。 实 际 上 ，Cocos2d-JS 中 的 事件 管理 器 就 是 事件 分 
发 器 。 我们 可 以 在 frameworks/js-bindings/bindings/script/jsb_boot.js 中 看 到 这 样 一 行 代码 : 


1 cc.eventManager = cc.director.getEventDispatcher(); 


5.2 ”事件 管理 器 


顾名思义 ， 事 件 管 理 需 就 是 负责 管理 事件 监听 需 的 ， 它 是 事件 监听 需 的 大 总 管 ， 管 理事 件 监 
听 器 的 添加 、 删 除 以 及 分 发 。cc.BventManager 是 一 个 单 例 类 ，cc.eventManagez 为 
cc.EventManager 的 单 例 对 象 ， 它 通过 下 面 这些 函 数 管理 各 类 事件 监听 器 。 


5.2.1 添加 事件 监听 器 
每 个 事件 监听 器 都 需要 添加 到 事件 管理 器 对 象 中 ， 添 加 事件 监听 器 的 函数 如 下 : 


1 cc.eventManager.addListener(listener, nodeOrpriority); 

其 中 ， 第 一 个 参数 1istener 是 事件 监听 器 对 象 ， 第 二 个 参数 nodeOrPriority 是 一 个 Node 
对 象 或 者 是 一 个 数值 。 知 给 定 的 参数 为 数值 ， 则 数值 越 低 , 事件 的 优先 级 越 高 。 若 给 定 的 参数 为 
一 个 Node 对 象 ， 则 事件 优先 级 取决 于 Node 对 象 的 Localzorder， 该 值 越 大 ， 事 件 优 先 级 越 高 。 

除 此 之 外 ，cc .EventListener 还 允许 添加 自 定 义 事件 。 自 定义 事件 取代 了 Cocos2d-x 2.x 
版 本 中 的 ccNotificationCenter。 你 可 以 通过 如 下 API 添 加 自 定义 事件 : 

1 cc.eventManager.addCustomListener (eventName, callback); 

通常 情况 下 ，eventName 为 自 定义 事件 的 名 字 ， 是 字符 串 类 型 ，callback 为 事件 的 回调 
函数 。 


hl 


ha 
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5.2.2 ”删除 事件 监听 器 


删除 和 添加 总 是 成 对 存在 的 , 当 你 不 再 需要 事件 监听 器 的 时 候 ,可 以 通过 cc .EventListener 
的 如 下 函数 移 除 : 


1 // 删除 指定 监听 器 

2 cc.eventManager.removeListener (listener); 

3  // 删除 指定 类 型 监听 器 

4 cc.eventManager.removeListeners(listenerType, recursive); 
5 // 删除 指定 自 定义 监听 器 

6 .eventManager.removeCustomListeners (customEventName); 

7 删除 所 有 监听 器 

8 .eventManager.removeAllListeners(); 

9 删除 target 下 指定 类 型 的 监听 器 

10 cc.eventManager.removeEventListener(type, target); 


5.2.3 ”设置 事件 监听 器 的 优先 级 
每 个 事件 监听 器 都 具有 优先 级 ， 优 先 级 可 以 通过 如 下 代码 给 事件 设置 或 更 改 : 


1 cc.eventManager.setpPriority(listener, fixedPriority); 
另外 ， 前 面 提 到 过 ,在 cc.eventManager 中 添加 事件 监听 器 的 时 候 ， 便 可 直接 设 定 事 件 监 
听 器 的 优先 级 ， 示 例 代 码 如 下 : 


1 cc.eventManager.addListener(listenerA, -1000); 
2 cc.eventManager.addListener(listenerB, -500); 


将 代码 转 为 示意 图 ， 就 如 图 5-2 所 示 ，Node_A 和 Node_ B 都 注册 了 触摸 事件 ，Node A 的 触摸 
事件 优先 级 是 -1000, Node_B 的 触摸 优先 级 是 -500, 虽然 Node_B 在 Node A 的 上 方 , 但 是 Node_A 
却 优先 被 触摸 到 。 


300 触摸 优先 级 :一 500 


触摸 优先 级 : -1000 | 和 优先 被 触摸 到 


图 $-2 ”触摸 优先 级 
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或 许 你 已 经 注意 到 了 , 此 时 ,你 并 没有 看 到 事件 监听 器 是 如 何 和 需要 监听 的 节点 进行 关联 的 。 
实际 上 ， 每 个 事件 监听 器 都 有 target 属 性 ， 它 指向 需要 被 监听 的 事件 对 象 ， 也 就 是 事件 源 ， 具 
体 代 码 见 5.3.1 节 。 


5.2.4 分 发 事件 


当 有 事件 被 触发 时 ，cc .eventManager 会 将 收 到 的 事件 分 发 给 对 应 的 事件 监听 器 。 事 件 分 
发 的 相关 API 代 码 如 下 : 

1 cc.eventManager.dispatchEvent (event); // 分 发 事件 

2 // 分 发 自 定义 事件 

3 cc.eventManager.dispatchCustomEvent (eventName, userData); 


第 1 行 代码 为 cc .eventManager 分 发 Cocos2d-JS 封 装 好 的 事件 ， 参 数 event 是 一 个 事件 对 
象 。 而 第 3 行 代 码 中 的 sventName 人 参数 为 用 户 自 定义 事件 的 名 字 , 是 一 个 字符 串 类 型 ，userData 
为 事件 携带 的 数据 , 可 以 是 一 个 对 象 等 。 另外 , userData 参 数 可 省 略 。 实 际 上 , cc .eventManager. 
dispatchCustomEvent (eventName,userData) 图 数 是 对 cc.eventManager .dispatchEvent- 
(event ) 国 数 的 二 次 封装 ， 它 的 源码 如 下 : 


1 cc.eventManager.dispatchCustomEvent = function(eventName, userData)t 
2 Var ev = new cc.EventCustom(eventName); 

3 ev.setUserData (optionalUserData); 

4 this.dispatchEvent (ev); 

Dd 


5.3 ”触摸 事件 


毫 无 疑问 ,在 移动 设备 上 ,触摸 事件 是 用 户 交 互 方式 中 最 为 基础 的 一 种 ,通常 包含 点 击 、 滑 
动 、 抬 起 。 触 摸 又 分 单 点 触摸 和 多 点 触摸 两 种 。 


5.3.1 单 点 触摸 


Cocos2d-JS 将 单 点 触摸 标记 为 cc .EventListener.TOUCH_ONE_BY_ONE， 你 可 以 通过 如 下 
代码 创建 一 个 单 点 触摸 的 事件 监听 器 : 


1 var listener = cc.EventListener.createl(t{ 

2 event : cc.EventListener.TOUCH ONE BY_ONE, 

3 swallowTouches : true, // 是 否 吞 噬 触 摸 

4 target : this， // 指定 事件 源 

5 onTouchBegan: function (touch, event) { 

6 // 获取 [当前 触发 事件 的 对 象 ] 

7 Var target = event .getCurrentTardget () 

8 // 将 点 击 坐 标 转换 为 基于 当前 触发 事件 对 象 的 本 地 坐标 

9 var posInNode = target.convertToNodeSpace (touch.getLocation()); 
10 // 获取 当前 节点 大 小 
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Var size = target.getContentSize(); 
// 区 域 设 定 
Var rect = cc.rect(0, 0, size.width, size.height); 
// 判断 触摸 点 是 否 在 节点 区 域内 
if (!(cc.rectContainsPoint (rect, posInNode))) { 
return false; 
} 
// TODO something 
return true; 
} 
onTouchMoved: function (touch, event) { 
Var target = event .getCurrentTarget (); 
var delta = touch.getDelta(); // 获取 [滑动 距离 ] 
target.x += delta.x; 
target.y += delta.y; 
} 
onTouchEnded: function (touch, event) { 
// TODO something 
} 


’ 


代码 通过 cc . EventListener 类 创建 了 一 个 事件 监听 器 对 象 ,第 2 行 代码 指定 当前 监听 


有 件 类 型 为 ToOUCH_ONE_BY_ONE， 表 示 单 点 触摸 ， 而 第 3 行 的 swa] 


L1owTouches 表 示 是 


否 行 只 触 摸 事 件 ， 当 swallowTouches 被 设置 为 true 之 后 ， 触 摸 事 件 将 不 再 向 下 传递 。 
假设 你 现在 有 两 个 事件 监听 器 listenerA 和 1istenerB，1listenerA 的 事件 优先 级 比 


listenerB 高 ， listenerA 监 听 节 点 Node A， 1istenerB 监 听 节 点 Node B。 若 1istenerA 中 


事件 对 象 的 swallowTouches 值 为 Lrue 的 话 ， 那 么 点 击 Node A 触 发 1isteneraA 时 ， 触 摸 


hl 


有 件 被 


否 哈 ，1istenerB 将 不 被 触发 ， 即 Node_ B 不 会 接收 到 触摸 事件 ， 如 图 5-3 所 示 。 若 1istenerA 的 
swallowTouches 值 为 false， 则 1istenerA 和 1istenerB 将 依次 被 触发 ， 如 5-4 所 示 。 


600， 


点 击 两 个 节点 的 
50 


不 会 被 触发 
》 40 


1 
30 监听 器 : listenerA 
swallowTouches: true 


监听 器 : listenerB 
swallowTouches: true 


20| 


图 $-3 ”swallowTouches 为 true 的 事件 生 喉 情况 


相交 区 域 ，listenerB 
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点 击 两 个 节点 的 
相交 区 域 ，listenerA 
和 listenerB 都 被 触发 


300' 监听 器 : listenerA 


swallowTouches:falsel 


监听 器 : listenerB 


swallowTouches:true 


200 


100 200 400 500 600 700 800 


x 


300 


图 $-4 ”swallowTouches 为 false 的 事件 天 哈 情况 


第 5 行 的 onTouchBegan、 第 21 行 的 onTouchMoved 和 第 27 行 的 onTouchEnded 为 触摸 事件 的 
回调 函数 , 分别 表示 触摸 开始 、 触 摸 移动 、 触 摸 结束 。 值 得 注意 的 是 , 在 这 三 个 方法 当中 ，this 
并 不 是 指向 当前 监听 器 监听 的 节点 ， 而 是 指向 事件 监听 器 本 身 。 所 以 ， 通 常 所 要 获取 的 this 对 
象 实 际 上 是 事件 监听 器 的 target( 监听 对 象 , 事件 源 ), target 一 般 是 cc .Node 或 者 cc .Node 的 子 类 ， 
例如 cc.Lavyer、cc.sprite 等 。 通 过 在 第 7 行 代码 ， 可 以 获取 到 这 个 target。 

当 获 取 到 target 之 后 , 需要 判断 当前 触摸 点 是 否 正确 触摸 到 了 target,， 第 8 行 到 第 17 行 就 是 做 了 
这 一 件 事 情 。 首 先 ， 将 触摸 点 转 为 target 的 本 地 坐标 ， 然 后 获取 下 target 的 大 小 ， 再 根据 target 的 大 
小 生成 一 块 区 域 ， 再 通过 cc .rectContainsPoint (rect，posInNogde) 图 数 判断 转换 后 的 
posInNode 是 否 在 target 的 区 域内 , 车 不 是 , 则 返回 false, 车 是, 继续 执行 代码 , 最 后 返回 true。 
当 返 回 false 之 后 ，onTouchMoved 和 onTouchEnd 将 不 被 调用 。 
第 23 行 是 一 个 非常 有 用 的 功能 ， 它 返回 上 一 次 onTouchMoved 和 这 一 次 onTouchMoved 的 触 
摸 偏 移 量 ， 并 且 有 正 负 值 ， 利 用 这 个 值 ， 可 以 实现 移动 target， 也 可 以 实现 滑动 方向 的 获取 ， 这 
在 平常 的 开发 中 ， 是 非常 有 用 的 一 个 功能 。 

当 事 件 监听 器 创建 完毕 之 后 ， 通 过 下 面 代 码 便 可 以 对 指定 的 节点 添加 触摸 事件 监听 : 


1 cc.eventManager.addListener(listener, spritel); 
2 cc.eventManager.addListener(listener.clone(), sprite2); 
3 cc.eventManager.addListener(listener.clone(), sprite3); 


5.3.2 ”多 点 触摸 


多 点 触摸 被 标记 为 cc .EventListener.TOUCH_ALL _AT_ONCE。 与 单 点 触摸 不 同 的 是 ， 多 
点 触摸 不 支持 事件 吞噬 ， 也 就 是 说 ， 多 点 触摸 没 办 法 穿 透 下 去 。 另 外 ， 多 点 触摸 的 事件 相关 处 理 
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国 数 是 onTouchesBegan、onTouchesMoved、onTouchesEnaed， 这 与 单 点 触摸 也 有 所 不 同 ， 
如 下 面 代码 中 的 第 5 行 到 第 7 行 所 示 : 


1 // 判断 当前 平台 是 否 支持 多 点 触摸 

2 if( 'touches' in cc.sys.capabilities ) { 

3 Var listener = cc.EventListener.createl(t{ 

4 event : cc.EventListener.TOUCH ALL AT ONCE, 
5 onTouchesBegan : this.onTouchesBegan, 

6 onTouchesMoved : this.onTouchesMoved, 

7 onTouchesEnded : this.onTouchesEnded 

8 Ps 

9 cc.eventManager.addListener (listener, this); 
10 }elsel{ 

11 // 当前 平台 不 支持 多 点 触摸 


生字 


当然 AS 在 例如 onTouchesBegan、 onTouchesMoved 和 onTouches Enaqed 事 件 处 理 函 数 中 
获取 出 多 个 触摸 点 ， 代 码 如 下 : 


1 onTouchesBegan: function (touches, event) { 

2 Var self = event.getCurrentTarget (); 

3 // touches[0] 表 示 捕 获 第 一 个 触摸 点 ，touches 为 触摸 点 集合 

4 for (var i = 0; i < touches.length;i+t+ ) { 

号 Var touch = touches[i]; 

6 Var pos = touch.getLocation(); 

7 var id = touch.getID(); 

8 // 获取 点 击 坐标 [基于 本 地 坐标 ] 

9 var locationInNode = self.convertToNodeSpace(touch.getLocation()); 


10 // 获取 当前 节点 大 小 

a var size = self.getContentSize(); 

12 // 区 域 设 定 

全 3 Var rect = cc.rect(0, 0, size.width, size.height); 
14 // 判断 触摸 点 是 否 在 节点 区 域内 

15 if (!(cc.rectContainsPoint (rect, locationInNode))) { 
16 return false; 

1 3 

18 cc.log("onTouchesBegan at: " + pos.xX + " "+ pos.y+ " Id:" + id); 
19 return true; 

20 } 

这 出 -站 


5.4 加 速 计 事件 


或 许 对 不 熟悉 移动 应 ee 加 速 计 这 个 词 可 能 有 点 陌生 ,因为 我 们 更 常 听 到 的 
是 另外 一 1 。 其 实 , 重力 感应 这 个 说 法 并 不 准确 ,因为 加 速 计 感应 的 并 非 只 有 
一 个 重力 加 速度 ( g )， 还 包括 设备 本 身 移动 的 加 速度 。 当 只 有 设备 被 静止 放置 在 地 上 的 时 候 , 加 
速 计 所 接收 到 的 所 有 加 速度 的 矢量 和 才 会 等 于 重力 加 速度 ， 这 时 候 才 算是 重力 感应 。 

加 速 计 会 感应 到 x、y 和 z 三 个 方向 上 的 加 速度 分 量 ，x 值 是 水 平方 向 上 的 分 量 ，y 值 是 竖 直 方 
向 上 的 分 量 ， 而 z 值 是 垂直 于 屏幕 的 方向 上 的 分 量 。 另 外 ， 加 速 计 感应 事件 和 前 面 提 到 的 触摸 事 
件 有 所 不 同 ， 加 速 计 事 件 需要 cc . inputManager 对 象 开 启 加 速 计 之 后 才 可 以 正常 使 用 。 另 外 ， 


AAA 
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加 速 计 事件 的 回调 函数 会 接收 到 一 个 携带 加 速度 分 量 数值 的 参数 ， 代 码 如 下 : 


1 // 判断 当前 平台 是 否 支持 加 速 计 

2 if( 'accelerometer' in cc.sys.capabilities ) { 

3 // 开启 加 速 计 

4 cc.inputManager.setAccelerometerEnabled (true); 

5 Var listener = cc.EventListener.createl({ 

6 event : cc.EventListener.ACCELERATION, 

7 callback : function (acc, event) { 

8 cc.log("accX = ", acc.x); // Xx 分量 

9 cc.log("accY = ", acc.y); // y 分 量 
cc.log("accz = ", acc.2); // 2Z 分 量 


} 
二 过 
cc.eventManager.addListener(listener, this); 
}elsel{ 


cc.1og(" 不 支持 加 速 计 事 件 " ) ; 


a 


} 
除 此 之 外 ， 你 可 以 通过 cc .inputManager.setAccelerometerInterval (number) 困 数 
来 设置 加 速 计 监 听 的 间隔 时 间 ， 其 默认 值 为 /30， 一 般 保持 默认 值 即 可 。 


5.5 键盘 事件 


移动 设备 虽然 已 经 偏向 屏幕 触摸 操作 多 年 , 但 是 设备 上 还 是 存在 一 些 非 虚拟 按键 ( 物理 按键 
或 者 触感 按键 )， 加 上 Cocos2d-JS 是 跨 全 平台 的 游戏 引擎 ， 支 持 发 布 到 Mac OS X 以 及 Windows 等 
平台 上 ， 所 以 ，Cocos2d-JS 将 这 些 按键 事件 都 统一 封装 为 键盘 事件 。 按 键 事件 的 回调 函数 会 接收 
到 一 个 携带 按键 编码 (Keycode ) 的 参数 ， 例 如 : 


1 // 判断 当前 平台 是 否 支持 键盘 事件 

2 if( 'keyboard' in cc.sys.capabilities ) { 

3 var listener = cc.EventListener.createl(t{ 

4 event : cc.EventListener .KEYBOARD, 

5 target : this, 

6 onKeyPressed : function(keyCode, event)t{ 

7 var keyCodeStr = String.fromCharCode (keyCode); // 按 键 编码 转 为 字符 
8 cc.log(keyCodeStr + "(" + keyCode.toString() + ") 按 下 "); 

9 }, 


onKeyReleased : function(keyCode, event)t{ 
var keyCodeStr = String.fromCharCode (keyCode) ;// 按 键 编码 转 为 字符 
cc.log(keyCodeStr + "(" + keyCode.toString() + ") 释 放 "); 
} 
用 
cc.eventManager.addListener(listener, this); 
}elsel{ 


cc.10g ("键盘 事件 不 支持 ") 


后 


} 
可 以 看 出 ， 键盘 事件 的 回调 丽 数 有 两 个 ，onKeyPressedq 困 数 在 按键 被 按 下 时 触发 ， 
onKeyReleased 在 按键 被 松 开 时 触发 ， 一 般 可 以 考虑 在 onKeyReleased 国 数 中 做 逻辑 处 理 。 运 
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行 上 面 代码 ， 然 后 任意 按 下 一 个 键 (我 按 下 S 键 )， 可 以 在 控制 台 看 到 如 图 5-5 所 示 的 输出 结 


展 口 Elements Network | Console|» : Xx 
© 可 <top frame> v [DPreserve log 
S(83) 按 下 CCDebugger. js:331 
S(83) 释 放 CCDebugger. js:331 


> | 


图 5-5 ”键盘 事件 测试 控制 台 输 出 


5.6 鼠标 事件 


虽然 触摸 事件 也 支持 电脑 上 鼠标 的 点 击 、 拖 鼻 、 抬 起 事件 ,但 是 触摸 事件 并 不 支持 鼠标 右键 
按 下 、 滚 轮 滚动 等 操作 ， 这 是 因为 它们 确 确实 实 属于 鼠标 事件 。Cocos2d-JS 鼠 标 事件 标记 为 
cc.EventListener.MOUSE， 提 供 4 个 鼠标 事件 回调 函数 , 分 别 是 : 按键 按 下 ( onMouseDown )、 
按键 松 开 ( onMouseUp )、 鼠 标 移 动 ( onMouseMove ) 和 滚轮 滚动 (onMouseScroll )。 鼠 标 事 
件 的 使 用 代码 如 下 : 


1 /1/ 判断 当前 平台 是 否 支持 鼠标 事件 
2 if( "mouse" in cc.sys.capabilities ) { 
3 Var listener = cc.EventListener.createl(t{ 
4 event : cc.EventListener .MOUSE, 
3 target : this, 
6 onMouseDown : function (event){ // 和 鼠标 事件 [ 按 下 ] 
2 Var pos = event .getLocation(); 
8 Var button = event.getButton(); 
9 if (button == cc.EventMouse.BUTTON LEFT){ // 左 键 
ce.1og(" 左 键 按 下 "，+ pos.x+" "+ pos.y); 
Jelse if(button == cc.EventMouse.BUTTON RIGHT){ // 右键 
cc.1og(" 右 键 掖 下 "，+ pos.x +" "+ pos.y); 
}else if(button == cc.EventMouse.BUTTON MIDDLE){// 滚轮 


cc.1o0g ("中 间 滚 轮 键 按 下 "); 
} 
es 


ODOOOOOOOPAPPPAPAPPPPPI 
骨 必 NO OU 已 口 


onMouseUp : function(event){ // 和 饼 标 事件 [ 抬 起 ] 
onMouseMove: function(event){ // 和 鼠标 事件 [移动 ] 
Var pos = event .getLocation(): 
cc.1og(" 和 鼠标 当前 位 置 : "，pos.x,， pos.y) 
和 
onMouseScrol1:function(event){ // 和 鼠标 事件 [滚轮 滚动 ] 
Var pos = cc.pb(event .getScrollxX(), event.getScrollY()); 
cc.1og(" 和 饼 标 滚轮 滚动 : "，pos.x + "my: "+ pos.y); 
26 } 
27 3} 
28 cc.eventManager.addListener (listener, this); 
29 }elsel{ 


30 cc.1og(" 不 支持 鼠标 事件 " ) ; 
区 部 央 时 
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运行 上 面 代码 ， 然 后 移动 鼠标 、 点 击 鼠 标的 左右 键 、 滑 动 滚轮， 可 以 在 控制 台 看 到 如 图 5-6 
所 示 的 输出 信息 ， 其 中 滚动 轮 输 出 值 的 正 负 表示 滚动 方向 。 


区 口 Elements Network Sources Timeline | Console | > A 
© 可 <top frame> v [Preserve log 
鼠标 当前 位 置 : 2706.6178010471204 206.6806282722513 CCDebugger. js:331 
右键 按 下 270.6178010471204 206.6806282722513 CCDebugger. js:331 
鼠标 滚轮 滚动 x: 0 y: 3 CCDebugger.js:331 
> 


图 5-6 ”鼠标 事件 测试 控制 台 输出 | 
5.7” 自 定义 事件 


除了 上 述 的 几 个 事件 之 外 ，5 引 | 擎 还 封装 了 一 个 自 定 义 事 件 ， 它 取代 了 Cocos2d-x 2.x 版 本 中 的 
通知 中 心 ccNotificationCenter。 下 列 代 码 创建 了 一 个 自 定义 事件 ， 并 将 其 添加 到 事件 管理 
髓 中 : 


1 // 创建 自 定义 函数 

2 var listener = cc.EventListener.createl(t{ 

3 event : cc.EventListener.CUSTOM, 

4 target : this, // 事件 源 

5 eventName : "Custom event", // 事件 名 

6 callback : function(event){ // 回调 函数 

字 Var target = event.getCurrentTarget(); // 事件 源 对 象 

8 cc.1log(" 自 定义 事件 被 触发 . . .Nm 携带 数据 : "，event .getUserData()); 
9 } 


TO 
11 cc.eventManager.addListener(listener, this); 


上 面 第 5 行 代码 指定 了 该 自 定 义 事件 的 事件 名 称 ， 其 类 型 是 字符 串 类 型 ， 该 属性 用 于 区 分 自 
定义 事件 。 在 实际 开发 中 ， 你 应 该 将 自 定义 事件 名 定义 成 一 个 常量 ,例如 cc .EventListener. 
TOUCH_ONE_BY_ONE。 

分 发 自 定义 事件 需要 先 根据 事件 名 创建 出 指定 的 自 定 义 事件 对 象 , 你 可 以 给 创建 出 来 的 对 象 
设置 一 个 用 户 数据 , 这 样 便 可 以 在 事件 分 发 的 时 候 将 数据 传输 给 事件 监听 者 , 然后 通过 事件 管理 
器 分 发 自 定义 事件 ， 代 码 如 下 : 


var event = new cc.EventCustom("custom event"); // 创建 自 定义 事件 
var data = { // 定义 数据 

name : " 凌 建 风 "， 

age : 23, 


hobby : "吃饭 、 睡 觉 、 写 代码 | " 
3 
event .setUserData (data); 
cc.eventManager.dispatchEvent (event); // 分 发 事件 


OOO ODP 
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分 发 事件 之 后 ， 在 浏览 器 的 控制 台 上 可 以 看 到 如 网 5-7 所 示 的 输出 : 


区 口 Elements Network Sources Timeline | Console | > :Xx 
© 可 <top frame> 了 Preserve log 
自 定义 事件 被 触发 . . 。 CCDebuqger.js:331 


携带 数据 : ”0bject {fname: " 矮 奸 网"，age: 23，hobby:" 态 级 、 用 党 、 写 代码 ! "} 


> | 


图 5-7 ” 自 定义 事件 测试 控制 人 台 的 输出 


5.8 ”实例 一 一 虚拟 摇 杆 封装 


在 一 些 2.5D 游 戏 中 ， 你 可 能 需要 一 个 虚拟 授 杆 ( 如 图 5-8 所 示 ) 来 控制 人 物 的 8 个 方向 行走 ， 
Cocos2d-JS 本 身 没有 封装 好 的 虚拟 摇 杆 (下面 简称 授 杆 ), 那么 , 在 本 章 中 我 们 一 起 来 开发 一 个 吧 。 


我 想 你 应 该 知道 ， 播 杆 需要 两 张 图 片 ， 分 别 是 底 图 和 把 手 ， 如 图 5$-9 和 图 5-10 所 示 。 


图 5-8 ”虚拟 摇 杆 图 $-9 ”虚拟 摇 杆 底 图 图 $-10 ”虚拟 摇 杆 把 手 
从 图 $-8 可 以 看 到 ， 摇 杆 把 手 放 在 摇 杆 底 图 的 正中 心 。 由 于 精灵 的 原点 也 是 在 正中 心 ， 所 以 


将 要 封装 的 摇 杆 继承 自 精 灵 类 ( cc . sprite ) 是 最 合适 不 过 的 了 。 我 把 扬 杆 的 代码 编写 在 随 书 代 
人 码 unit05_event/Rockerjs 文 件 中 ， 下 面 开 始 编码 。 

首先 ， 我 给 摇 杆 定义 几 个 类 型 ,分别 是 默认 类 型 ( DEFAULT )、 自 动 类 型 (AUTO )、 隐 藏 类 
型 (HIDE ) 以 及 不 透明 类 型 (OoPACITY )， 代 码 如 下 : 


1 // 虚拟 毛 杆 类 型 

2 Var ROCKER TYPE = ROCKER TYPE || {}; 

3 ROCKER_TYPE.DEFAULT = "DEFAULT";// 默认 类 型 
4 ROCKER TYPE.AUTO = "RUTO" // 自动 类 型 
5 ROCKER TYPE.HIDE = "HIDE"; // 隐藏 类 型 
6 ROCKER TYPE.OPACITY = 255; // 不 透明 类 型 


其 中 , 默认 类 型 的 位 置 是 固定 的 ， 而 自动 类 型 则 是 基于 默认 类 型 , 加 了 每 次 用 户 点 击 哪里 播 
杆 就 出 现在 哪里 的 功能 。 隐 藏 类 型 和 不 透明 类 型 都 是 基于 自动 类 型 的 , 只 是 前 者 在 游戏 中 不 可 见 ， 
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后 者 可 以 设置 透明 度 。 虽 然 隐 藏 类 型 可 以 用 不 透明 类 型 模拟 ， 但 是 ， 在 第 3 章 中 我 已 经 说 过 ， 当 
一 个 节点 的 不 透明 值 为 0 的 时 候 ， 泻 染 器 依旧 会 对 其 泻 染 ， 造 成 性 能 浪费 ， 所 以 ， 你 应 当 明 白 节 
点 的 不 透明 值 为 0/ 和 visiple 属 性 值 为 false 的 区 别 。 


接着 ， 我 定义 了 ROCKER_DIR1 


a 


ECTION 对 象 来 保存 授 杆 的 8 个 方向 和 原点 ， 把 它们 都 放 到 了 


ROCKER_DIRECTION_ARRAY 数 组 中 ， 形 成 了 一 个 方向 和 数组 下 标的 映射 关系 ， 并 且 定 义 了 每 个 
方向 的 角度 数组 。 图 解 如 图 5-11 所 示 ， 相 关 代 码 如 下 : 


// 摇 杆 方向 


ROCKER DIRECTION.UP 


‘OO DNI 


// 方向 数组 


TS 
Ky M0 OO: I UT BY OD 


2 
24 // 8 个 方向 的 角度 数组 


25 Var ROCKER ANGLE ARRAY = 


Var ROCKER DIRECTION = ROCKER DIRECTION || 
ROCKER DIRECTION.RIGHT 
ROCKER DIRECTION.RIGHT UP 


ROCKER DIRECTION.LEFT_ UP 
ROCKER DIRECTION.LEFT 
ROCKER DIRECTION.LEFT_ DOWN 
ROCKER DIRECTION.DOWN 
ROCKER DIRECTION.RIGHT DOWN 
ROCKER DIRECTION.ORIGIN 


Var ROCKER DIRECTION ARRAY = [ 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 
ROCKER DIRECTION. 


RIGHT, 
RIGHT_UP， 
UP, 

LEFT_UP, 
LEFT, 

LEFT_ DOWN, 
DOWN, 
RIGHT_DOWN， 
ORIGIN 


{}; 
"RIGHT"; 


= "RIGHT UP"; 


wnUPp"; 
"LEFT_UP"; 
"LEFT"; 
"LEFT_ DOWN"; 
"DOWN"; 


= "RIGHT DOWN"; 
= "ORIGIN"; 


A 
J 
A 
// 
A 
// 
// 
yh 
// 


[2 


向 右 
右上 
向 上 
左上 
向 左 
左下 
向 下 
右 下 
原点 


“DPA Om2 YD Dd 


图 5-11 


虚拟 摇 村 


F 方 向 的 角度 映射 关系 
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接着 我 定义 了 摇 杆 类 Rocker， 它 继承 自 cc .Sprite， 代码 如 下 : 


1 
2 
3 
4 
3 
6 
~ 


// 扬 杆 精灵 
Var Rocker = cc.Sprite.extend({ // 继承 cc.Sprite 类 
ctor : function(baseTexture, knobTexture, type)t{ 
this._super(); // 调用 父 类 构造 溃 数 
return true; 


ja 


在 Rockez 的 构造 函数 中 ,接收 了 3 个 参数 ， 分 别 是 摇 杆 底 图 资源 、 摇 杆 把 手 资源 以 及 摇 杆 类 
型 。 毫 无 疑问 ， 摇 杆 底 图 和 摇 杆 把 手 都 是 一 个 精灵 ， 并 且 它 们 在 Rocket 类 的 其 他 方法 里 会 访问 
到 ， 所 以 ， 应 该 把 它们 定义 成 Rocker 类 的 属性 ， 摇 杆 的 类 型 也 不 例外 。 此 外 ， 还 需要 定义 成 类 
成 员 属 性 的 还 有 触摸 监听 事件 touchListener 、 把 手 可 移动 半径 raqius 以 及 方向 Qirection 
等 。 具 体 代 码 如 下 : 


1 
2 
3 
4 
3 
6 
7 
8 


于 久 


tk 


硬 


Var Rocker = cc.Sprite.extend({ 


_baseNode : null, // 底盘 [节点 ] 

_knobNode : null, // 把 手 [ 节 点 ] 
_touchListener : null, // 触摸 事件 [监听 器 ] 
_radius : 0， // 扒 杆 的 可 移动 半径 

_angle : 0， // 角度 

_velocity : CC.p(0，0),// 速度 

_callback : null, // 回调 函数 

_direction : ROCKER DIRECTION.ORIGIN, // 方 向 
_type : ROCKER TYPE.DEFAULT, // 毛 杆 类 型 


ctor: function(baseTexture, knobTexture, type)t 
this._super(); 
return true; 


于 


其 中 ，velocity 为 摇 杆 的 速度 向 量 ， 取 值 为 [0,1]。_callback 为 摇 杆 的 回调 函数 ， 我 把 它 声 明 
为 私有 属性 ， 然 后 通过 cc .defineGetterSett r(proto, prop, getter, setter) 函数 为 
_callback 定 义 了 属性 操作 ， 代码 如 下 : 


1 


WD 


OUONRODP 


Var _p = Rocker.prototype; 
cc.defineGetterSetter(_p, "callback", _p.getCallback, _p.setCallback); 
_p.callback; 


getCallback : function(){ 
return this. callback; 

} 

setCallback : function(callback){ 
this. callback = callback; 

} 


下 面 定 义 两 个 精灵 来 表示 摇 杆 的 底 图 和 把 手 ， 代 码 如 下 : 


1 
2 
3 
4 


// 加 载 精 只 [_baseNode 和 _knobNode] 

loadBaseAndKnob : function(baseTexture, knobTexture){ 
this. baseNode = new cc.Sprite(baseTexture); 
this. knobNode = new cc.Sprite(knobTexture); 
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this.addChild(this._ baseNode); 
this.addChild(this._ knobNode); 


5 
6 
7 
再 编写 一 个 函数 ， 用 来 配置 半径 radius 和 类 型 type 等 属性 ， 代 码 如 下 : 


// 


1 
2 
3 
4 
5 
6 
过 
8 


9 
10 
11 
12 
13 
14 
1 5 
16 } 


加 载 配置 半径 _radius 和 类 型 type 等 


loadConfig : function(type)t{ 
this. radius = this. baseNode.getContentSize() .width / 2; 


if (type !== undefined){ 

if (isNaN(type))t{ 
this. type = type; 
if (this. type == ROCKER TYPE.HIDE){ 

this.setVisible(false); 

} 

}elsel{ 
this. type = ROCKER TYPE.OPACITY; 


this.setOpacity (type); 


this.setCascadeOpacityEnabled(true); // 开启 子 节点 透明 度 关联 


此 时 , 在 Rocker 的 构造 函数 中 , 分 别 调用 loadBaseAndKknob (baseTexture, knobTexture) 
和 1loagdConfig (type) 隐 数 。 


接 下 来 ,开始 对 摇 杆 添加 ( 注册 ) 触摸 事件 。 这 里 我 编写 了 两 个 和 触摸 弹 


别 是 注册 事件 registerEvent 和 和 仓 载 事件 unRegisterEvent ， 代 人 码 如 下 : 


// 


小 
2 
3 
4 
3 
6 
7 
8 


12 }), 
L137 
14 un 


L671} 


注册 [触摸 事件 监听 器 ] 


registerEvent : function(){ 


this. touchListener = cc.EventListener.createl(t{ 


event : cc.EventListener.TOUCH ONE_ BY_ONE, 
target : this, 

swallowTouches : true, 

onTouchBegan : this.onTouchBegan, 

onTouchMoved : this.onTouchMoved, 

onTouchEnded : this.onTouchEnded 


iy 
cc.eventManager.addListener(this. touchListener, this); 


印 载 [触摸 事件 监听 器 ] 
RegisterEvent : function(){ 
cc.eventManager.removeListener (this. touchListener); 


和 件 相关 的 函数 ， 分 


整个 摇 杆 中 , 比较 重要 的 部 分 就 是 触摸 事件 回调 函数 中 的 逻辑 了 。 在 onTouchBegan 清 数 中 ， 
主要 是 根据 不 同类 型 的 授 杆 做 对 应 的 处 理 , 例如 默认 类 型 的 播 杆 , 则 限定 必须 触摸 到 把 手 摇 杆 才 
能 正确 工作 , 并 且 整 个 授 杆 的 位 置 不 会 发 生变 动 。 如 若 不 是 默认 类 型 的 择 杆 ， 则 将 整个 摇 杆 的 坐 
标 设置 为 当前 触摸 点 。 除 此 之 外 ， 如 果 是 目 动 类 型 的 ， 则 将 整个 摇 杆 显示 出 来 。 代 码 如 下 : 


onTouchBegan: function (touch, event) { 


var target = this.target; 
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va knob = target._knobNode; // 获取 把 手 
var locationInNode = knob.convertToNodeSpace (touch.getLocation()); 
Var size = knob.getContentSize(); 
Var rect = cc.rect(0, 0, size.width, size.height); 
if (target._type == ROCKER _TYPE.DEFAULT){ // 默认 类 型 
if (!cc.rectContainsPoint (rect, locationInNode)) { 
return false; 


‘O00 


} 
jelse { // 非 默认 类 型 
if (target._ type == ROCKER TYPE.AUTO)T{ 
target.setVisible(true); 
3} 
target.setPosition(touch.getLocation()); 
} 


return true; 


OA DOPO 


} 


手 和 原点 的 距离 不 能 超过 摇 杆 的 半径 ， 代 码 如 下 : 


onTouchMoved: function (touch, event) { 


2 // 节点 获取 

3 Var target = this.target; 

4 Var knob = target._ knobNode; 

5 // 触摸 点 转 为 摇 杆 的 本 地 坐标 

6 var locationInNode = target.convertToNodeSpace (touch.getLocation()); 

7 target .onUpdate (locationInNode); // 角度 、 方 向、 速度 等 更 新 

8 // 长 度 获取 [当前 触摸 点 相对 扬 杆 中 心 点 ] 

9 var length = cc.pLength(locationInNode); 

10 var radians = cc.degreesToRadians (target._angle); 

// 限制 把 手 和 原点 的 距离 不 能 超过 毛 杆 的 半径 

并 和 if ( length > target._radius) { 

13 var x = Math.cos(radians) * target. radius: 

二 本 var y = Math.sin(radians) * target. radius: 

15 knob.setPosition(cc.p(x, y)); 

16 }elsel{ 

17 knob.setPosition(locationInNode); 

18 } 

9 对 

上 面 代 码 中 ， 第 7 行 是 一 个 总 更 新 函数 ， 此 函数 也 只 在 onTouchMoved 中 被 调用 ， 用 来 更 新 
摇 杆 的 角度 、 方 向 以 及 速度 ， 代 码 如 下 : 

// 更 新 [角度 、 方 向 、 速 度 ] 


2 onUpdate : function(pos)t{ 

3 // 更 新 [角度 ] 

4 this.onUpdateAngle (pos); 

5 // 更 新 [方向 ] 

6 this.onUpdateDirection (pos); 
7 // 更 新 [速度 ] 

8 this.onUpdateVelocity(); 


9 3 


在 onTouchMoved 函 数 中 ， 主 要 就 是 计算 出 摇 杆 的 角度 、 方 向 以 及 速度 等 ， 男 外 还 限制 了 把 


从 上 面 的 代码 中 可 以 看 到 ，onUpdate 函 数 分 别 调用 了 更 新 角度 、 方 向 、 速 度 的 函数 。 在 
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onUpdateAngle 限 数 中 ,接收 一 个 点 ,通过 cc .pToAngle (pos) 函数 获得 此 点 pos 和 原点 cc .p (0， 
0) 所 形成 的 线段 与 X 轴 正方 向 夹 角 的 弧度 , 然后 通过 cc .radiansToDegrees (radians) A 
弧度 转 为 角度 ， 并 旦 将 角度 转 为 [0, 360] 的 区 间 ， 而 不 是 -112.5° 这 样 的 值 。 转 为 360° 的 方式 ， 
与 ROCKER_ANGLE_ARRAY 数 组 配合 工作 ， 具 体 下 面 会 讲 到 。onUpdateAngle 的 代码 如 下 : 


// 更 新 [角度 ] 
onUpdateAngle : function(pos)t{ 
this. angle = cc.radiansToDegrees (cc.pToAngle (pos)); 
if (this. angle < 0) { 
this. angle += 360; 


} 


J ORODP 


说 明 ”cocos2d-x/web/cocos2d/core/support/CCPointExtension.js 文 件 中 定义 了 许多 关于 点 或 向 量 
的 常用 函数 ， 例 如 cc.pDistance(v1，v2) 可 以 返回 两 点 之 间 的 距离 等 。 


当 角 度 转 为 [0, 360] 的 取 值 区 间 ， 再 加 上 方向 数组 ROCKER_DIRECTION_ARRAY 以 及 8 个 方向 
的 角度 数组 RocKER_ANGLE_ARRAY 的 辅助 ， 获 取 方 向 就 变 得 比较 简单 了 。 只 需 遍 历 一 下 
ROCKER_ANGLE_ARRAY 数 组 , 然后 将 当前 的 角度 与 RocKER_ANGLE_ARRAY 中 的 值 进 行 区 间 匹 配 ， 
匹配 成 功 后 得 到 索引 。 因 为 ROCKER_DIRECTION_ARRAY 和 ROCKER_ANGLE_ARRAY 这 两 个 数组 存 
在 映射 关系 ， 所 以 可 以 直接 通过 当前 的 索引 取出 对 应 的 方向 。 更 新 方向 的 代码 如 下 : 


1 // 更 新 [方向 ] 

2 onUpdateDirection : function()f{ 

3 for (var i = 1; i < ROCKER ANGLE ARRAY.length; i++) { 

4 this. direction = ROCKER_DIRECTION_ARRAY[0]; // 默认 向 右 

全 if (this. angle >= ROCKER ANGLE ARRAY[iI - 1] && this. angle < ROCKER ANGLE_ 


ARRAY[i]) { 
this. direction = ROCKER DIRECTION ARRAY[i]; 
break; 


} 
0 } 


前 面 说 到 ， 我 将 速度 设置 成 一 个 向 量 ， 其 X 轴 和 Y 轴 的 分 量 的 取 值 范围 都 为 [0, 1]。 速 度 更 新 
代码 如 下 : 


1 // 更 新 [速度 ] 

2 onUpdateVelocity : function()f{ 

3 this. velocity.x = this. knobNode .getPositionxX() / this._ radius; 
4 this. velocity.y = this. knobNode.getPositionY() / this. radius; 
2 


而 在 onTouchEndaed 函 数 中 做 了 一 些 收尾 的 工作 。 例 如 ， 如 果 当 前 的 Reckez 类 型 是 自动 的 ， 
则 将 摇 杆 隐藏 ， 并 且 对 摇 杆 进行 重 置 操作 。 此 外 ， 当 速度 等 被 重 置 后 , 摇 杆 把 手 回 到 原点 后 也 触 
发 了 回调 函数 。 该 函数 的 代码 如 下 : 


AS 让- 
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1 onTouchEnded: function (touch, event) { 
2 var target = this.target; 
3 if (target._ type == ROCKER TYPE.AUTO)T{ 
4 target.setVisible(false); 
5 } 
6 target.reset (); // 重 置 
7 target .onCallback (); // 触发 回调 泡 数 
8 J 
9 // 重 置 
10 reset function(){ 
11 this. knobNode.setPosition(0, 0); 
2 this. angle = 0; 
13 this. velocity = cc.p(0, 0); 
14 this. direction = ROCKER DIRECTION.ORIGIN; 
5 
16 // 触发 [回调 函数 ] 
17 onCallback : function(){ 
18 (this. callback && typeof (this. callback) === "function") && this. callback 
(this. velocity); 
A 
最 后 ， 还 需要 启动 update 调 度 器 ， 用 来 触发 回调 函数 。 该 函数 的 实现 代码 如 下 : 
update : function(dt)t{ 
2 if (this. direction != ROCKER DIRECTION.ORIGIN) { 
3 this.onCallback(); // 和 触发 回调 函数 
4 } 
Ss。 
至 此 ， 播 杆 封 装 完 毕 ， 可 以 通过 如 下 代码 (完整 代码 见 随 书 代码 ) 创建 出 一 个 摇 杆 : 


1 // 加 载 [ 摇 杆 ] 
2 loadRocker : function(){ 
3 var node = new Rocker (res.u5_ control base png, 
ROCKER_TYPE. DEFAULT); 
4 this.addChild (node); 
5 node.setCallback (function(vec){ 
6 Go.L0g ("= 有 
7 CC.1log ("速度 ,Xi:", Vec.x, "y:", vec.y); 
8 cc.1og(" 角 度 :",， node.angle); 
9 cc.1og(" 方 向 :"，nodqe.direction) 
10 }.bind(this)); 
1 二 node.setPosition(200, 130); 
1 之 - 放 
其 中 ，Rocker 构 造 函 数 中 的 最 后 一 个 参数 ROCKER_TYPE .DE 


AUTO、 ROCKER_TYPE .HIDE 
移动 摊 杆 ， 可 以 在 控制 台 看 到 如 图 5-12 所 示 的 输出 
度 都 为 0 了 ， 方 向 重 置 为 ORIGIN。 


EFAULT 也 可 以 是 Ro 
或 者 是 一 个 0 到 255 的 数值 ， 它 表示 摇 杆 的 类 型 。 最 后 
结果 。 当 触摸 结束 ， 把 手 回 到 原点 ， 速度 、 


res.u5 control knob png， 


ER_'TYPI 


运行 代码 ， 


[ea| 


角 
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区 本 器 Elements Network Sources Timeline Profiles | Console | > : Xx 
© 可 <top frame> Y [JpPreserve log 
ES CCDebugqer.js:331 
速度 ，x: 0,.5719698454613957 y: 0.8202746466171358 CCDebugger. js:331 
角度 : 54.476596746842624 CCDebugger.ijs:331 


方向 : RIGHT_UP 


速度 , x: 0 y: 0 
角度 : 0 
方向 : ORIGIN 


CCDebugger,.is:331 
CCDebugger.ijs:331 
CCDebugger,.is:331 
CCDebugger.is:331 
CCDebugger,.is:331 


5.9 小 结 


通过 本 章 的 学 习 , 我 们 知道 了 在 Cocos2d-JS 中 , 每 个 事件 的 处 理 都 由 事件 对 象 、 事 件 监听 器 、 
事件 管理 器 互相 配合 而 成 。 事 件 对 象 中 保存 着 事件 的 类 型 、 相 关 回 调 函 数 等 信息 。Cocos2d-JS 封 
和 人 件 、 加 速 计 感应 事件 、 键 盘 事 件 、 和 鼠标 事件 以 及 自 定义 事件 ， 自 定义 事件 取代 了 
Cocos2d-x 2.x 版 本 的 通知 中 心 CcCNotificationCenter， 我 们 应 该 学 会 并 合理 使 用 自 定 义 事件 ， 
这 对 代码 的 低 耦 合 有 很 大 的 帮助 。 另 外 ， 在 本 章 的 实例 中 ,我 们 一 起 封装 了 一 个 虚拟 摇 杆 。 


装 好 了 触摸 


5.10 参 


考 资源 


本 章 的 参考 资源 为 引 


eventManager/zh。 


图 5-12 


有 件 分 发 机 


虚拟 播 杆 测试 控制 台 的 输出 结 


出 : http://www.cocos2d-x.org/docs/manual/framework/html5/v3/ 
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音频 处 理 


一 款 成 功 的 游戏 ,不 仅 需 要 美术 视觉 上 的 盛 实 ， 更 需要 音频 处 理 带 来 的 听觉 冲击 。 音 频 不 仅 
可 以 调动 游戏 的 背景 气氛 ， 控 制 游 戏 节奏 ,增强 游戏 代 和 人 感 ， 还 可 以 在 场景 切换 加 载 资 源 的 时 候 
起 到 “人 未 到 声 先 到 ”的 过 渡 作 用 ， 绥 解 玩家 等 待 资源 加 载 的 烦躁 。 
在 游戏 中 , 音频 通常 分 为 音乐 和 音效 两 种 。 音 乐 即 为 游戏 背景 音乐 , 用 来 泻 染 当 前 场景 的 听 
觉 气 氛 。 音 乐 文件 较 长 ,一般 一 次 也 只 播放 一 首 。 音 效 作为 游戏 的 增强 表现 ,通常 是 一 些 较 短 的 
音 ， 例 如 子弹 发 射 声音 、 刀 剑 打 击 声 、 炸 弹 爆 炸 等 。 音 效 支 持 一 次 同时 播放 多 个 。 

本 章 内 容 : 
口 Cocos2d-JS 中 的 音频 
口 背景 音乐 何 时 播放 
口 实例 给 《保卫 萝卜 2》 添 加 音频 


一 
RT 


6.1 Cocos2d-JS 中 的 音频 


在 JSB 上 ， 音 频 由 simpleAudiormnmgine 类 来 处 理 。simpleAudioEngine 可 以 实现 音频 跨 平 
其 底层 为 Cocos2d-x 自 带 的 CocosDension 库 。 而 在 JS 层 ， 音 频 统 一 由 cc .audioEngine 对 象 来 


和 人 
中， 
控制 。 


6.1.1 cc.audiogngine 的 常用 API 


cc.audioEngine 提 供 了 简单 易 用 的 音频 API， 其 控制 音乐 的 常用 API 如 表 6-1 和 表 6-2 所 示 。 


表 6-1 cc .audiogngine 控 制 音 乐 的 常用 API 
返 回 值 函数 名 说 明 
无 playMusic (url, loop) 播放 指定 音乐 ，Loop 表 示 是 否 循环 ， 默 认 值 为 false 
无 stopMusic (releaseData) 停止 音乐 ，releaseData 为 是 否 释放 音乐 ， 默认 值 为 false 
无 pauseMusic() 暂停 播放 音乐 
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( 续 ) 

返 回 值 函数 名 说 明 

无 resumeMusic () 恢复 播放 音乐 

无 rewindMusic() 重新 播放 音乐 

浮 点 数 getMusicVolume () 获取 音乐 音量 ， 返 回 值 范围 10-1] 

无 setMusicVolume (volume) 设置 音乐 音量 ， 音 量 设 定 值 范围 为 [0-1] 

布尔 值 isMusicPlaying() 判断 背景 音乐 是 否 正 在 播放 

表 6-2 cc.audiogngine 控 制 音 效 的 常用 API 

返回 值 函 数 名 说 明 

object playBffect (url, 1oop) 播放 指定 音效 ，1oop 表 示 是 否 循环 ， 返 回 值 为 cc.auaio 对 象 

无 setEffectsvolume (volume) ”设置 音效 音量 ， 设 定 值 范围 为 [0-1] 

浮 点 型 get EffectsVolume() 获取 音效 音量 ， 返 回 值 范围 10-1] 

无 pauseEffect (audio) 暂停 指定 音效 

无 pauseAllEffects() 暂停 所 有 音效 

无 resumeEffect (audio) 恢复 播放 指定 音 询 

无 resumeAllEffects() 恢复 播放 所 有 音效 

无 stopEffect (audio) 停止 指定 音效 

无 stopAllEffects() 停止 所 有 音效 

无 unloadEffect (url) 和 伯 载 指定 音 交 


6.1.2 各 平台 下 支持 的 音频 格式 


Cocos2d-JS 是 一 个 全 平台 游戏 引擎 ， 各 平台 支持 的 音频 格式 也 有 所 不 同 ， 例 如 一 个 .ogg 格 式 
的 音频 在 Android 下 能 正常 播放 ， 而 在 iOS 中 则 没有 声音 ， 这 是 因为 iOS 系 统 不 支持 .ogg 音频 格式 
解码 的 问题 。 表 6-3 和 表 6-4 分 别 列 出 了 各 平台 下 对 音乐 和 音效 文件 格式 的 支持 情况 。 


表 6-3 ”Cocos2d-JS 在 各 平台 支持 的 音乐 格式 


平台 名 称 支持 类 型 说 明 

iOS aac、caf、m4a、mp3 和 wav 可 以 播放 AVAudioPlayer 所 支持 的 所 有 格式 

Android mid、ogg、mp3 和 wav 可 以 播放 android.media.MediaPlayer 所 支持 的 所 有 格式 
Web oog 和 mp3 Web 平 台 支持 的 格式 依赖 于 浏览 器 

Windows mid、mp3 和 wav 无 


表 6-4 ”Cocos2d-JS 在 各 平台 支持 的 音效 格式 


平台 名 称 支持 类 型 说 ” 明 

iOS mp3、cafflm4a 可 以 播放 CocosDesion 引 擎 所 支持 的 所 有 格式 
Android mp3、ogg 和 wav 对 wav 的 支持 不 完美 ， 推 荐 使 用 ogg 

Web mp3 和 wav Web 平 台 支持 的 格式 依赖 于 浏览 器 


Windows mid 和 wav 无 
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说 明 音频 格式 的 支持 基本 都 依赖 于 系统 层 ， CocosDesion 底 层 的 实现 都 是 调用 平台 相关 的 API， 
具体 可 参见 6.5 节 。 


6.2 ”背景 音乐 何 时 播放 
在 3.4.3 节 中 我 们 知道 了 , 当 SceneA 切 换 到 SceneB 的 时 候 , 其 场景 生命 周期 相关 函数 的 调用 顺 


1 SceneRA : ctor 

2 SceneA : onEnter 

3 SceneA : onEnterTransitionDidFinish 
4 SceneB : ctor 

5 SceneaA : onExitTransitionDidstart 

6 SceneaA : onExit 

7 SceneB : onEnter 

8 SceneB onEnterTransitionDidFinish 


ne ，Cocos2d-JS 会 完 调 用 SceneB 的 ctor 构 造 函 数 ， 然 后 继续 调 
用 SceneA 的 onExitTransitionDidstart 和 onExit 函 数 ， ed 
SceneB 泻 染 出 来 。 不 难 发 现 ， ed 在 。 一般 情况 下 ， 
我 们 就 是 在 这 个 函数 中 开始 播放 SceneB 的 背景 音乐 。 只 有 在 这 个 函数 中 播放 背景 音乐 , 才 可 以 起 
到 “人 未 到 声 先 到 ”的 过 渡 作用 。 
针对 此 问题 , 可 以 写 一 个 测试 工程 。 首先, 需要 声明 两 个 场景 , 它们 分 别 是 SceneA 和 SceneB， 
并 且 重 写 其 生命 周期 相关 的 函数 ， 代 码 如 下 : 


Var SceneA = cc.Scene.extend({ 
ctor : function(){ 
this. super(); 
cc.log("SceneaA : ctor"); 


EY 


} 
onEnter : function () { 
this. super(); 
cc.log("SceneaA : onEnter"); 
// SceneA 标 签 显 示 
Var label = new cc.LabelTTF ("This is SceneA."™, "", 36); 
this.addCchild(label); 
label.setPosition(cc.winSize.width / 2, cc.winSize.height / 2); 
// 下 一 帧 切换 场景 
Var callback = cc.callFunc (function(sender){ 
Var Scene = new SceneB(); 
cc.director.runScene (scene); 
}.bind(this)); 
Var seq = cc.sequence(callback); 
this.runAction(seq); 


‘oO OOOOD 


co OU 局 


DD 
Oo 


}, 
21 onEnterTransitionDidFinish : function () { 
this._super(); 


DD 
DD 
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23 cc.log("SceneA : onEnterTransitionDidFinish").; 
24 } 

之 与 onExitTransitionDidSstart : function () { 

26 cc.log("SceneA : onExitTransitionDidstart"); 
a this. super(); 

28 }, 

29 onExit : function () { 

3:0 cc.log("SceneaA : onExit").; 

31 this._super(); 

32 } 

3 


在 SceneA 的 onEnter 国 数 中 定义 了 一 个 标签 ， 用 来 显示 当前 的 场景 是 SceneA ， 第 13 行 到 第 
20 行 代码 的 作用 是 让 SceneA 在 下 一 帧 的 时 候 ， 自 动 切换 到 SceneB。SceneB 的 代码 如 下 : 


1 var SceneB = cc.Scene.extend ({ 


2 ctor : function()t{ 

3 this. super(); 6 
4 cc.log("SceneB : ctor"); 

5 // 播放 背景 音乐 

6 cc.audioEngine.playMusic("res/unit07 audio/music/main music.mp3"); 
7 }, 

8 onEnter : function () { 

9 this._super(); 

10 cc.log("SceneB : onEnter"); 

直下 // SceneB 标 签 显示 

12 Var label = new cc.LabelTTF ("This is SceneB.", "", 36); 
13 this.addCchild(label); 

et label.setPosition(cc.winSize.width / 2, cc.winSize.height / 2 - 100); 
15 // 创建 15000 个 精灵 ， 故 意 造 成 卡 顿 

16 for (var i = 0; i < 15000; i++){ 

4 var node = new cc.Sprite(res.sh node 128 png); 

18 this.addChild (node); 

19 node.setPosition(1.2 * i, V.h2); 

2:0 } 

流沙 ys 

2:2 onEnterTransitionDidFinish : function () { 

23 this. super(); 

244 cc.log("SceneB : onEnterTransitionDidFinish").; 

25 ps 

26 onExitTransitionDidSstart : function () { 

2 cc.log("SceneB : onExitTransitionDidstart"); 

28 this. super(); 

29 上 

30 onExit : function () { 

31 cc.log("SceneB : onExit").; 

32 this. super(); 

33 } 

34 }); 


在 SceneB 的 ctor 函 数 中 播放 背景 音乐 ， 然 后 在 onEnter 国 数 中 (上述 代码 15~20 行 ) 创建 了 
1$000 个 精灵 ， 使 场景 卡 顿 一 段 时 间 ， 这 主要 用 来 模拟 加 载 SceneB 资 源 。 运 行 SceneA ， 立 马 可 以 
听 到 SceneB 的 背景 音乐 , 而 这 个 时 候 , 还 未 进入 SceneB 中 的 onEnter 国 数 ,所 以 SceneB 中 的 1$000 
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个 精灵 还 未 被 泻 染 出 来 ， 这 就 达到 了 “人 未 到 声 先 到 ”的 过 渡 效 果 。 


6.3 ”实例 给 《保卫 萝卜 2》 添 加 音频 


在 本 章 中 ,我 们 将 给 《保卫 萝卜 2》 添 加 部 分 音乐 和 音频 。 


前 面 说 到 ,背景 音乐 正确 的 播放 时 机 应 该 是 在 场景 的 构造 函数 中 ， 所 以 我 们 应 该 在 
MainMenuScene 的 ctor 构 造 函数 中 播放 对 应 的 背景 音乐 ， 代 码 如 下 : 


1 var MainMenuScene = cc.Scene.extendl({ 

2 backgroundLayer : null, 

3 mainLayer : null, 

4 ctor : function(){ 

5 this._super(); 

6 cc.audiogEngine.playMusic(res.sd mm BGMusic mp3, true); 
7 

8 

9 


} 
然后 ,也 给 主页 面 中 的 “天 天 向 上 ”和 “开始 冒险 ”菜单 按钮 添加 了 对 应 的 点 击 音效 ,它们 
在 MMMainLayer 类 中 ， 代 码 如 下 : 


1 // 加 载 “开始 冒险 ”和 “天 天 向 上 ”菜单 
2 loadMenu : function(){ 
3 A rs 
4 // 开始 冒险 
5 var start = new cc.MenuItemSprite!l( 
6 startNormal, 
7 StartPress， 
8 StartDisabled， 
9 function(){ 
10 cc.109g (“上 点击“ 开始 冒险 ”按钮 ”); 
小 cc.audiogngine.playEffect (res.sd mm Select mp3); 
二 }.bind(this)); 
止 3 start.setPosition(V.w2 - 8, V.h2 + 75); 
14 J ed a es 
15 } 
6.4 小结 


通过 本 章 的 学 习 , 我 们 了 解 了 如 何在 游戏 中 控制 音乐 和 音频 文件 的 播放 , 熟悉 了 各 个 平台 下 
所 支持 的 音乐 以 及 音效 格式 , 并 且 清 楚 了 应 该 在 下 一 个 场景 的 构造 函数 中 播放 背景 音乐 , 这 样 可 
以 起 到 “人 未 到 声 先 到 ”的 过 渡 效 果 ， 增 强 了 游戏 体验 。 最 后 ,我们 给 《保卫 蔓 下 2》 的 主页 面 


添加 了 背景 音乐 。 
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本 章 的 参考 资源 如 下 。 

口 官方 API: http://api.cocos.com/cn/d0/d75/classcocos2d 1 lexperimental 1 1 audio engine.html。 
口 iOS 音 频 使 用 : https:/developerapple.conylibrary/ios/documentation/AudioVideo/Conceptual/ 
MultimediaPG/UsingAudio/UsingAudio.html。 

口 Android 媒 体 支 持 格 式 : http://developer.android.com/guide/appendix/media-formats.html。 


一 直 以 来 ， 屏 幕 适 配 让 开发 者 其 为 烦躁 ， 特 别 是 在 Android 设 备 泛滥 或 “碎片 化 ”的 今天 ， 
市 面 上 的 Android 设 备 有 各 种 屏幕 尺寸 以 及 分 辨 率 。 据 OpenSignalMaps 发 布 的 Android 雁 片 化 统计 
报告 数据 显示 ， 在 2012 年 ， 支 持 Android 的 设备 共有 3997 种 ，2013 年 发 展 到 11868 种 ， 到 了 2014 年 
高 达 18796 种 ，2015 年 还 在 持续 增长 中 。 再 加 上 iPhone 6s、iPhone 6s Plus 以 及 iPad Pro 等 的 推出 ， 
移动 设备 的 屏幕 尺寸 更 是 越 来 越 多 , 要 想 将 游戏 都 适 配 到 这 么 多 屏幕 上 , 并 不 是 一 件 简 单 的 事情 。 

本 章 内 容 : 

口 屏幕 适 配 原理 

口 如 何 使 用 适 配 模式 
口 系统 预 设 适 配 模 式 
口 推荐 的 适 配 方 案 


7.1 屏幕 适 配 原理 


Cocos 引 擎 在 Cocos2d-x 2.0.4 版 本 时 推出 了 多 屏幕 适 配 方案 ， 提 出 了 设计 分 辩 率 ( design 
resolution ) 的 概念 ,， 它 屏蔽 了 资源 分 辨 率 (resource resolution ) 和 屏幕 分 辩 率 ( screen resolution )。 
开发 者 只 需 将 节点 在 设计 分 辨 率 上 进行 位 置 设 定 即 可 。 

设计 分 辩 率 指 的 是 游戏 在 开发 时 所 指定 的 设计 分 辨 率 尺 寸 , 在 main.js 的 cc .game .onStart () 
函数 中 设 定 。 下 列 代码 设 定 设 计 分 辨 率 的 宽 为 1136， 高 为 640: 

1 cc.view.sSetDesignResolutionSize(1136，640，cc.ResolutionPolicy.SHOW ALL); 

资源 分 辩 率 指 的 是 图 片 资源 的 尺寸 ， 图 7-1 所 示 的 图 片 的 资源 分 辩 率 为 1334 x 750。 

屏幕 分 辨 率 为 屏幕 图 像 的 精密 度 ,， 指 显示 屏 所 能 显示 的 像素 有 多 少 , 显示 屏 可 显示 的 像素 越 
多 ,画面 就 越 精 细 。 不 同 的 移动 设备 有 不 同 的 屏幕 分 辨 率 , 在 显示 屏 大 小 固定 时 ， 屏 幕 分 辩 率 越 
高 ， 图 像 越 清晰 。 例 如 ， 主 流 移动 设备 iPhone 6s 的 屏幕 分 辨 率 为 1334 x 750， 小 米 4 的 屏幕 分 辩 率 
为 1920 x 1080。 

除了 这 3 个 分 辩 率 的 概念 之 外 ， 屏 幕 适 配 的 背后 又 存在 两 个 转换 适 配 过 程 ， 分 别 是 从 资源 分 
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辩 率 转换 到 设计 分 辨 率 ， 以 及 从 设计 分 辨 率 转换 成 屏幕 分 辩 率 。 


《保卫 萝卜 2》 主 页 面 .png 


便携 网 络 图 形 图 像 (PNG 图 像 ) 一 1.4 MB 
创建 时 间 今天 20:33 
修改 时 间 今天 20:33 


上 次 打开 时 间 今天 20:33 
RY 1334x750 
添加 标记 .… 
图 7-1 图 片 资 源 分 辩 率 
Cocos2d-JS 游 戏 在 进行 屏幕 适 配 的 时 候 ， 有 可 能 会 先 将 资源 分 辨 率 转 换 成 设计 分 辨 率 ， 这 取 
决 于 你 是 否 设 定 了 内 容 缩放 因子 。 内 容 缩放 因子 指 的 是 资源 分 辩 率 的 宽 比 设计 分 辨 率 的 宽 ， 又 或 
者 是 资源 分 辨 率 的 高 比 设 计 分 辩 率 的 高 ， 即 RW / DW 或 者 RH / DH， 其 中 RW 、DW 等 为 简写 。 
为 了 描述 方便 ， 在 本 章 后 面 ， 我 都 将 采用 简写 的 方式 表达 ， 简 写 对 应 的 全 称 如 表 7-1 所 示 。 
表 7-1 简写 对 应 的 全 称 


全 称 简 称 说 。 明 
Resources Width RW 资源 分 辨 率 的 宽度 
Resources Height RH 资源 分 状 率 的 高 度 
Design Width DW 设计 分 状 率 的 宽度 
Design Height DH 设计 分 状 率 的 高 度 
Scene Width SW 屏幕 分 辩 率 的 宽度 
Scene Height SH 屏幕 分 辨 率 的 高 度 


内 容 缩放 因子 一 般 也 是 在 cc.game.onstart () 函数 中 设 定 的 ， 代 码 如 下 : 

1 co.director.setContentscaleFactor(768 / 640); 

用 高 度 比 作为 内 容 缩 放 因 子 ， 保 证 了 资源 图 片 的 垂直 方向 在 设计 分 辩 率 范围 内 的 全 部 显示 。 
用 宽度 比 作 为 内 容 缩 放 因 子 ， 保 证 了 资源 图 片 的 水 平方 向 在 设计 分 辨 率 范围 内 的 全 部 显示 。 

接 下 来 要 进行 第 二 次 转换 ， 就 是 将 设计 分 辩 率 转换 成 屏幕 分 辨 率 。Cocos2d-JS 一 共 为 第 二 次 
转换 提供 了 5 种 适 配 方式 ， 这 里 称 为 适 配 模式 。 只 有 进行 第 二 次 转换 后 ， 才 是 最 终 显示 在 屏幕 上 
的 效果 。 关 于 这 5 种 适 配 模式 ， 将 在 7.3 节 中 详细 介绍 。 
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7.2 如何 使 用 适 配 模式 


了 解 第 二 次 转换 的 5 种 适 配 模式 前 ， 先 要 了 人 解 一 下 Cocos2d-JS 中 是 如 何 使 用 适 配 模式 的 。 在 
main.js 文 件 中 的 cc .game .onStart 方 法 里 可 以 看 到 如 下 接口 : 


1 


cc. 


view.setDesignResolutionSize(width,height,resolutionPolicy); 


此 代码 用 来 设置 设计 分 辨 率 的 大 小 和 适 配 模 式 ， 其 中 wiath 和 height 分 别 表示 游戏 设计 分 
辩 率 的 宽 resolutionPolicy 为 5 种 适 配 模式 之 一 , 其 可 选 值 为 如 下 5 种 ( 我们 将 在 后 
面 进一步 介 


cc. 


这 5 个 选项 ): 


.ResolutionPolicy .EXACT FIT 
.ResolutionPolicy .NO_ BORDER 
.ResolutionPolicy .SHOW_ ALL 
.ResolutionPolicy .FIXED HEIGHT 
.ResolutionPolicy .FIXED WIDTH 


你 也 可 以 通过 如 下 接口 修改 适 配 模式 : 


view.setResolutionPolicy (resolutionpPolicy); 


在 Web 上 ,浏览 絮 的 大 小 可 能 随时 被 改变 ,例如 通过 用 户 拖 忠 来 改变 浏览 絮 大 小 ,或 者 当 玩 
家 转动 手机 方向 的 时 候 。 适 配方 案 允 许 在 浏览 器 大 小 变化 的 时 候 重 新 进行 屏幕 适 配 , 其 接口 如 下 : 


1 
其 中 参 


说 明 


CC . 


数 i 


CC 


View.resizeWithBrowserSize(isEnabled); 


sEnabled 为 Boolean 类 型 的 值 ， 表 示 是 否 开启 重新 适 配 。 


.view.resizeWithBrowserSize(isEnabledq) 函数 仅 在 Web 上 有 效 。 


为 了 更 灵活 地 应 对 变化 , Cocos2d-JS 为 cc .view 的 大 小 变化 添加 了 一 个 回调 函数 , 其 接口 如 下 : 


1 


cc. 


View.setResizeCallback (callback); 


其 中 callback 为 一 个 回调 函数 。 例 如 ， 在 微 信 浏 览 带 上 ， 玩 家 转动 手机 方向 的 时 候 ， 你 便 可 以 


通过 此 函数 判断 当前 手机 是 横 oe ; 示例 代 码 如 下 : 


Var callback = function(){ 


if (cc.winSize.width < cc.winSize.height) { 
cc.1og ("屏幕 改变 为 : 横 屏 ") ; 

}else if (cc.winSize.width > cc.winSize.height){ 
cc.1og ("屏幕 改变 为 : 坚 屏 ") 

}elsel{ 
cc.1og ("屏幕 方向 没有 变化 ") 

} 


cc.10g ("旋转 屏幕 前 : ",cc.winsize); 
Var fun = cc.callFunc (function(){ 
cc.10g ("旋转 屏幕 后 : "， cc.winSize); 


Ds 


cc.director.getRunningScene() .runAction (fun); 
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Ph 
16 cc.view.setResizeCallback (callback); 


需要 特别 注意 的 是 ， 第 2 行 代码 中 的 判断 条 件 是 cc .winsize.width < cc.winSize. 
height ， 即 如 果 夯 布 的 宽度 小 于 高 度 ， 则 是 横 屏 。 这 看 上 去 似乎 是 错误 的 ， 但 是 实际 上 这 上段 代 
码 是 正确 的 , 因为 callback 回 调 函 数 在 重新 适 配 屏幕 之 前 就 被 调用 了 , 所 以 此 时 的 cc .winsize 
的 值 还 是 上 一 次 屏幕 适 配 时 的 值 。 第 10 行 代码 打印 出 当前 的 cc .winsize 的 值 ， 然 后 在 下 一 帧 的 
时 候 ， 再 次 打印 出 cc .winsize 的 值 ，Chrome 浏 览 器 控制 台 输 出 结果 如 图 7-2 所 示 。 


民 口 Elements “ Console Sources Network Timeline Profiles Resources Audits a 
© 本 <top frame> v OPreserve log 
Cocos2d-JS v3.9 CCDebugger,.is? t=1452428670905;331 
屏幕 改变 为 : 竖 屏 CCDebugger. is? t=1452428670905;331 
旋转 屏幕 前 : Object {width: 1136, height: 640} CCDebuqger. js? t=1452428670905:331 
旋转 屏幕 后 : Object f{width: 649，height: 1136} CCDebuqqer. js? t=1452428670905:331 
> 


图 7-2 ”屏幕 旋转 前 后 cc .winsize 的 值 


另外 ，Chrome 浏 览 器 自身 携带 了 一 个 手机 模拟 器 ， 在 Mac OS X 操 作 系 统 下 ， 可 以 通过 快捷 
键 shiftrcommand+M ( Windows 对 应 Ctrl+Shift+M ) 打开 ， 如 图 7-3 所 示 ， 你 可 以 在 此 模拟 器 中 选 
择 市 面 上 常见 的 手机 分 辨 率 , 也 可 以 自 定 义 分 辩 率 , 这 可 以 让 你 快速 查看 到 你 的 游戏 在 不 同 分 辨 
率 下 的 适 配 效果 。 


Network 


图 7-3 Chrome 浏览 器 中 的 手机 模拟 器 


在 Chrome 浏 览 器 中 的 手机 模拟 器 中 调试 你 的 游戏 时 ， 若 首次 点 击 屏幕 ， 游 戏 会 自动 全 屏 ， 
你 可 以 在 cc .game .onstart 函 数 的 开头 关闭 自动 全 屏 ， 代 码 如 下 所 示 : 
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1 cc.game.onStart = function(){ 

2 YP 

3 cc.view.enableAutoFullScreen (false); // 关 闭 游戏 在 浏览 器 上 自动 全 屏 

4 cc.view.enableRetinal(cc.sSys.os === cc.SYySs.0S_IOS ? true : false); 
3 Ve 

6° 


7.3 系统 预 设 适 配 模式 


之 前 我 曾 提 到 Cocos2d-JS 中 预 设 了 5 种 适 配 模式 来 进行 第 二 次 转换 ， 下 面 将 详细 介绍 每 种 适 
配 模式 的 效果 。 


7.3.1 cc.ResolutionPolicy .SHOW ALL 


cc.ResolutionPolicy.SHOW_ALL 表 示 显 示 所 有 ,此 模式 会 按 原始 宽 高 比 等 比 缩放 游戏 世 
界 以 适 配 屏幕 , 保证 了 最 小 的 一 个 方向 上 充满 屏幕 ， 男 一 个 方向 等 比 缩放 ， 从 而 使 得 游戏 内 容 全 
部 可 见 。 当 然 , 这样 当 屏 幕 宽 高 比 不 等 于 设计 分 辨 率 的 宽 高 比 时 ， 窗 口中 会 有 一 定 的 黑 边 ， 如 图 
7-4 所 示 。 


图 7-4 ”cc .ResolutionpPolicy .SHOW_ALL 适 配 模 式 的 效果 


说 明 图 7-3 中 背景 图 的 资源 分 状 率 大 小 为 1024 x 768， 本 章 后 面 的 图 也 都 将 以 此 图 为 基础 ， 并 
且 设 计 分 ee 屏幕 分 辨 率 为 1136 x 640。 


7.3.2 cc.ResolutionPolicy.NO_BORDER 


cc.ResolutionPolicy.NO_BORDER 表 示 没 有 边框 ， 此 模式 也 会 按 原 始 宽 高 比 等 比 缩放 游 
戏 世 界 以 适 配 屏幕 , 但 实际 上 , cc.ResolutionPolicy .NO_BORDER 与 cc.ResolutionPolicy . 


7.3 系统 预 设 适 配 模式 


111 


SHOW_ALL 模 式 是 相反 的 关系 ,cc.ResolutionPolicy.NO_BORDER 并 不 会 留 有 黑 边 , 所 以 屏幕 


分 辩 率 宽 高 比 不 同 于 设计 分 辩 率 的 宽 高 比 时 ， 游 戏 世 界 会 被 部 分 切割 在 屏幕 外 ， 如 图 7- 


图 7-5 cc.ResolutionPolicy.NO_BORDER 模 式 的 适 配 效 果 


5 所 示 。 


另外， 在 这 种 情况 下 ，cc .visibleRect 代 表 的 就 是 Canvas 在 游戏 世界 中 的 视窗 ， 其 大 小 比 
cc .winSize 要 小 一 些 。 我 将 cc .visibleRect 和 cc .winSize 打 印 出 来 ,得 到 的 结果 如 图 7-6 所 


示 ， 可 以 发 现 ， 此 时 cc .visibleRect 的 height 不 是 768， 而 是 575.712143928036。 


民 0 Elements Console Sources Network Timeline Profiles Resources » Al -es 
© 可 <top frame> v OPreservelog 
Cocos2d-]S v3.9 CCDebugger,js? t=1452530759933:331 
Object {width: 1024, height: 768} CCDebugger.is? t=1452530759933:331 


CCDebugger.is? t=1452530759933:331 
vObject {topLeft: Object, topRight: Object, top: Object, bottomLeft: Object, 
bottomRight: Object.. 

Pbottom: Object 
PbottomLeft; Object 


PbottomRight: Object 
Pcenter: Object 
height: 575.712143928036 
Pinit: function (visibleRect) 
Pleft: Object 
vright: Object 
x: 1024 
y: 383.80809595202396 
pb_proto : 0bject 
Ptop: 0bject 
PtopLeft: Object 
PtopRight: Object 
width: 1024 
Pp__proto_:; Object 


图 7-6 cc .winSize 和 cc .visipbleRect 的 值 


7.3.3 cc.ResolutionpPolicy.EXACT FIT 


cc.ResolutionpPolicy.EXAcT_FIT 表 示 拉 伸 ， 此 模式 保证 了 游戏 世界 完全 铺 满 


屏幕 ， 但 


可 能 会 出 现 图 像 拉 伸 。 图 7-7 为 cc .ResolutionPolicy .EXACT_FIT 模 式 的 适 配 效 果 , 可 以 明 


显 看 出 ， 横向 被 拉 伸 了 。 
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60:000 
i69.9 


图 7-7 cc.ResolutionPolicy.EXACT_FIT 模 式 的 适 配 效 果 


7.3.4 cc.ResolutionPolicy .FIXED HEIGHT 


cc.Resolutionpolicy .FIXED_HEIGHT 表 示 固 定 高 度 ,此 模式 会 纵向 放大 游戏 世界 以 适应 
屏幕 的 宽度 ， 横 向 按 原始 宽 高 比 放 大 ， 它 保证 了 游戏 内 容 不 会 被 拉 伸 ， 如 图 7-8 所 示 。 


图 7-8 cc.ResolutionPolicy.EFIXED_HEIGHT 适 配 模 式 的 效果 


cc.ResolutionPolicy.FIXED_HEIGHT 模 式 下 ， 游 戏 世界 坐标 系 等 同 于 整个 屏幕 ( Web 
中 对 应 Canvas 元 素 ) 的 坐标 系 , 即 始终 以 屏幕 的 左下 角 为 坐标 原点 , 这 和 cc.ResolutionPolicy. 
SHOW_ALL 模 式 不 同 。 在 图 7-4 中 可 以 看 到 ，cc .ResolutionPolicy .SHOW_ALL 模 式 下 FPS 显 示 
的 位 置 并 不 是 正 左下 角 ， 而 是 向 右 有 所 偏离 ， 但 是 cc .ResolutionPolicy .FIXED_HEIGHT 模 
式 下 的 游戏 坐标 始终 为 正 左下 角 。 所 以 , 可 以 得 出 , 在 cc .ResolutionPolicy .FIXED_HEIGHT 
模式 下 的 游戏 可 显示 内 容 区 域 实际 上 比 cc .ResolutionPolicy .SHOW_ALL 模 式 更 多 。 
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7.3.5 cc.ResolutionPolicy .FIXED WIDTH 


cc.ResolutionpPolicy.FIXED_WIDTH 表 示 固 定 宽 度 ， 此 模式 会 横向 放大 游戏 世界 以 适 屏 
幕 的 宽度 ， 纵 向 按 原始 宽 高 比 放 大 ， 如 图 7-9 所 示 。cc.ResolutionPolicy .FIXED_WIDTH 和 
cc.ResolutionPolicy.FIXED_HEIGHT 仅 仅 只 是 相反 关系 ， 前 者 固定 高 度 ， 后 者 固定 宽度 。 


图 7-9 cc.ResolutionPolicy.FIXED_WIDTH 适 配 模 式 的 效果 


7.4 推荐 的 适 配 方案 


cc.ResolutionPolicy.NO_BORDER 曾 经 是 官方 推荐 使 用 的 适 配 方案 ， 它 不 会 拉 伸 图 像 ， 
同时 在 一 个 方向 上 撑 满 了 屏幕 ， 但 是 后 来 新 加 入 的 cc.ResolutionPolicy.FIXED_HEIGHT 和 
cc.ResolutionPolicy .FIXED_WIDTH 策 略 撼动 了 它 的 地 位 。 目 前 ， 这 两 种 策略 也 是 官方 推荐 
使 用 的 方案 。 

cc.ResolutionPolicy.EFIXED_HEIGHT 和 cc.ResolutionPolicy.FIXED_WIDTH 策 略 
适 配 的 用 法 非常 简单 ， 其 至 可 以 提取 出 公式 ， 如 下 : 


// 横 屏 游戏 

cc.view.setDesignResolutionSize(DW, DH, cc.ResolutionPolicy .FIXED HEIGHT); 
cc.director.setContentScaleFactor(RH / DH); 

// 坚 屏 游戏 

cc.view.setDesignResolutionSize(DW, DH, cc.ResolutionPolicy .FIXED WIDTH); 
cc.director.setContentScaleFactor (RW / DW); 


在 实际 开发 中 , 我 们 一 般 用 到 的 也 就 是 这 两 种 模式 , 横 屏 游戏 使 用 cc .ResolutionPolicy. 
FIXED_HEIGHT 模 式 固定 高 度 ， 竖 屏 游 戏 使 用 cc.ResolutionPolicy.FIXED_WIDTH 模 式 固定 
宽度 。 

以 横 屏 游戏 《保卫 葛 上 下 2》 为 例 ( 竖 屏 同 理 )， 它 采用 的 模式 是 cc.ResolutionPolicy . 
FIXED_HEIGHT， 并 且 它 直接 将 游戏 设计 分 辨 率 设置 为 和 资源 ( 游戏 背景 图 ) 分 辨 率 一 样 大 ， 即 
资源 分 辩 率 和 设计 分 辨 率 都 为 1136 x 640 ， 而 内 容 缩放 因子 保持 默认 值 1。 因 为 在 
cc.ResolutionPolicy .FIXED_HEIGHT 模 式 下 ,1136 x 640 大 小 的 内 容 能 铺 满 960 x 640 的 屏幕 ， 


ON 性 wwN 上 
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而 960 x 640 大 小 的 背景 图 并 不 能 铺 满 1136 x 640 大 小 的 屏幕 ， 所 以 在 横 屏 模式 下 ， 你 应 当 尽 可 能 
地 保证 你 的 游戏 背景 图 片 的 宽度 足够 大 ， 例 如 在 960 x 640 和 1136 x 640 这 两 种 尺寸 中 ， 你 应 该 考 
虑 后 者 而 不 是 前 者 。 


1136 x 640 的 尺寸 为 16 : 9， 从 iPhone 5 开始 到 iPhone 6s Plus， 屏 幕 比 例 也 都 是 16 : 9， 那 么 
选择 iPhone 5s 的 1136 x 640 还 是 iPhone 6s 的 1334 x 750 实 际 上 都 是 一 样 的 ， 这 取决 于 你 自己 。 


另外 要 说 明 的 是 ， 在 开发 中 ， 节 点 的 坐标 要 懂得 灵活 选择 参考 系 ， 例 如 《保卫 萝卜 2》 主 页 
面 中 的 设置 按钮 是 以 屏幕 中 心 点 为 坐标 参照 点 , 而 不 是 屏幕 的 左下 角 。 这样 的 做 法 保证 了 其 在 各 
种 屏幕 分 辩 率 下 节点 的 布局 都 不 会 发 生变 化 ， 只 是 显示 的 区 域 大 小 不 同 而 已 。 这 也 就 是 说 ， 在 
cc.Resolutionpolicy .FIXED_HEIGHT 或 者 cc .ResolutionPolicy .FIXED_WIDTH 模 式 下 ， 
你 应 当 尽 可 能 地 将 游戏 元 素 集 中 在 屏幕 中 间 ， 左 右 (或 上 下 ) 两 侧 在 比较 窗 (对 比 1136 x 640 ) 
的 屏幕 分 辩 率 上 ( 例如 960 x 640 ) 可 能 不 会 显示 出 来 。 《保卫 萝卜 2》 在 iPhone 6 和 iPhone 4 上 的 运 
行 效 果 如 图 7-10 和 图 7-11 所 示 。 


图 7-10 《保卫 萝卜 2》 主 页 面 适 配 在 iPhone 6 上 的 效果 


图 7-11 《保卫 萝卜 2》 主 页 面 适 配 在 iPhone 4 上 的 效果 
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与 图 7-10 相 比 ， 图 7-11 只 是 左右 被 “裁剪 ”了 一 部 分 ， 其 他 的 (例如 节点 位 置 等 ) 并 没有 发 
生变 化 。 这 是 因为 ， 主 页面 上 的 节点 ， 都 是 以 屏幕 正中 心 为 坐标 参考 点 , 但 是 ,在 其 他 的 情况 下 
就 可 能 发 生变 化 。 例 如 ， 图 7-12 为 《保卫 葛 卜 2》 的 关卡 选择 页 面 ， 左 上 角 有 个 返回 主页 面 的 按 
钮 ， 就 应 该 以 屏幕 左上 角 为 参考 点 ， 坐 标 设 定 代码 如 下 : 

1 button.setPosition(posx, cc.winSize.height - offsetY) 

其 中 ，offsetY 为 Y 轴 向 下 偏 移 量 。 而 右上 角 的 生命 星 则 应 当 以 右上 角 为 坐标 参考 点 ， 它 的 坐标 
设 定 代码 如 下 : 


1 star.setPosition(cc.winSsize.width - offsetX, cc.winSize.height - offsetyY); 


和 丛生 命 呈 010 :> 


加 人 二 7/ 


, DD 
ODO a Der 
图 7-12 《保卫 萝卜 2》 关 卡 选 择 页 面 


另外 , 虽然 市 面 上 移动 设备 的 屏幕 五 花 八 门 , 但 是 在 做 适 配 测试 的 时 候 , 可 以 考虑 借鉴 “ 极 值 ” 
思想 。 以 iOS 设 备 为 例 ， 若 游戏 能 适 配 在 屏幕 “最 长 ”的 iPhone 6s (分辩 率 1334 x 750 ) 和 “最 短 ” 
的 iPad ( 分辩 率 1024 x 768 )， 那 么 屏幕 分 辨 率 夹 在 这 两 者 之 间 的 ， 便 都 可 以 拥有 很 好 的 适 配 效 果 。 


7.5 小结 


本 章 主要 介绍 了 Cocos 引 擎 适 配 的 过 程 , 以 及 预 设 的 5 种 适 配 模 式 : cc .ResolutionPolicy. 
SHOW_ALL 、 cc.ResolutionPolicy.NO_BORDER 、 cc.ResolutionpPolicy .EXACT_FIT、 


cc.ResolutionpPolicy .FIXED WIDTH 和 和 cc.ResolutionPolicy .FIXED HEIGHT,Cocos2d-JS 
默认 使 用 的 是 cc .ResolutionPolicy .SHOW_ALL 模 式 , 而 目前 推荐 的 适 配 方式 是 如 果 游 戏 是 横 
屏 的 ,那么 使 用 cc.ResolutionPolicy.FIXED_HEIGHT 模 式 ; 如 果 是 竖 屏 的 ， 则 使 用 
cc.Resolutionpolicy .FIXED_WIDTH 模 式 。 


本 章 的 参考 资源 如 下 。 


口 Cocos2d-x 多 分 辩 率 适 配 完全 解析 : http://www.tairan.com/archives/4809/。 
口 Cocos2d-JS 的 屏幕 适 配 方案 : http:/www.cocos.com/doc/article/index?type=cocos2d-x&url=/ 


doc/cocos-docs-mastermanual/framework/cocos2d-js/4-essential-concepts/4-4-resolution-polic 


ies/zh.md。 
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数据 存储 


对 于 计算 机 来 说 , 所 有 的 东西 都 只 是 一 堆 数 据 , 这 些 数据 可 以 是 简单 的 数字 , 也 可 以 是 文字 、 
图 像 、 声 音 、 视 频 等 。 但 相对 游戏 开发 而 言 ， 我 们 平常 所 说 的 数据 ， 更 多 的 是 偏向 玩家 的 数据 ， 


例如 玩家 拥有 的 金币 、 钻 石 ， 又 或 者 是 用 户 的 一 些 配 置信 息 ， 例 如 是 否 保存 账号 、 声 音 开关 等 。 


因为 这 些 数据 不 受 游 戏 运行 状态 的 影响 , 所 以 它们 通常 保存 在 本 地 文件 中 , 这 也 就 是 所 谓 的 数据 
存储 ， 又 称 数 据 持久 化 。 


在 Cocos2d-JS 中 ， 数 据 存储 可 以 通过 cc .sys.1LocalStorage、 plist、JSON 以 及 SQLite 等 途 
径 实 现 ， 本 章 将 围绕 这 些 实现 来 展开 。 


本 章 内 容 : 


8.1 cc.sys.localStorage 


在 实际 开发 中 ， 我 们 通常 会 把 用 户 设置 、 是 否 第 一 次 开启 游戏 等 这 些 简 单 而 又 单独 的 数据 


通过 cc .sys.1localStorage 存 储 。 cc.sys.localStorage 采 用 键 值 对 的 设计 方式 ， 其 API 


如 表 8-1 所 示 。 


口 cc.sSys.1localStorade 
D JSON 文 件 读 取 
口 plist 文 件 读 取 
口 SQLite 实 现 

D 实例 一 一 解锁 《保卫 萝卜 2》 的 “天 天 向 上 ”玩法 


表 8-1 cc.sys.localStorage API 


函 数 说 明 
cc.sys.localStorage.setItem(key, value); key 为 字符 串 类 型 ，value 为 数值 或 字符 串 
cc.sys.localStorage.getItem(key); 返回 值 为 数值 或 者 字符 串 。 若 数据 不 存在 ， 则 返回 nul1 
cc.SYySs.1ocalStorage .removeItem(key) ; 根据 键 删 除 值 
cc.sys.localStorage.clear(); 


清空 所 有 通过 cc .sys .localSstorage 保 存 的 数据 
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在 HTML5S 上 ， 因 为 cc.sys.1localstorage 的 实现 依赖 于 windqows .localStorage， 所 以 
通过 cc .sys .1ocalStorage 存 储 的 数据 并 不 安全 , 它 可 能 很 容易 被 一 些 例如 电脑 管家 等 第 三 7 


软件 清除 掉 ， 从 而 存在 安全 隐 
Cocos2d-x JSB 封 装 了 一 些 简 


患 。 而 在 JSB 中 ，cc .sys.localStorage 底 层 则 由 SQLite3 实 现 ， 
j 单 的 调用 函数 ， 然 后 做 了 脚本 绑 定 〈 见 第 16 章 )， 具 体 代码 在 


cocoS2d-x/cocos/storage/local-storage 路 径 下 。 


综 上 所 述 ， 除 非 是 一 些 简 


单 并 且 不 在 乎 其 安全 问题 的 数据 ， 否 则 我 们 一 般 建 议 放 在 服务 端 。 


另外 ， 在 开发 过 程 中 ， 除 了 通过 调用 cc.sys.1localstorage.clear() 来 清除 LocalStorage 
中 的 数据 外 , 还 可 以 在 Chrome 浏 览 器 中 清空 “Cookie 以 及 其 他 网 站 数据 和 插件 数据 ”来 达到 目的 ， 


如 图 8-1 所 示 。 


清除 浏览 数据 四 


清除 指定 


时 间 段 内 的 数据 : | 全 部 = 


加 浏览 记录 

口 下 载 记录 

加 Cookie 及 其 他 网 站 数据 和 插件 数据 
口 缓存 的 图 片 和 文件 

回 内 容许 可 


了 解 详情 


| 取消 | | 清除 浏览 数据 


图 8-1 ”Cookie 以 及 其 他 网 站 数据 和 插件 数据 


技巧 在 HTML5 上 , 可 以 通过 cc .1log (cc.sys.localStorage) 的 方式 , 打印 出 1ocalStorage 


里 所 有 的 数据 。 


8.2 JSON 文件 读 取 


JSON (JavaScript Object Notation ) 是 一 种 轻 量 级 的 数据 交互 格式 ， 它 是 JavaScript 原 生 格式 ， 
以 键 值 对 的 形式 存在 ， 如 图 8-2 所 示 。 通 常人 情况 下 ，JSON 主 要 用 于 客户 端 和 服务 端 之 间 的 数据 传 
送 ， 或 者 是 当 作 本 地 配置 文件 ， 就 像 Cocos2d-JS 工 程 下 的 projectjson 文 件 那样 。 


JSON 的 读 取 较为 简单 ， 在 Cocos2d-JS 中 可 以 通过 如 下 方式 读 取 : 


]; 


if (err)t 


OOO ODP 


return; 


var jsonArray = [ // 定义 要 加 载 的 JSON 文 件数 组 
"res/unit08_ data/config.json" 


// 加 载 ISON 文 件 ， 可 以 批量 加 载 ， 读 取出 来 的 数据 保存 在 results 数 组 中 


cc.loader.load(jsonArray, function(err, results)t 


cc.error("Failed to load %s, %s ."，jsonArray); // 错误 提示 


数据 存储 


8.3 


// 打印 [所 有 加 载 结果 ] 
// 打印 [ 读 取 的 第 一 个 JSON] 


cc.log(results); 
cc.log(results[0]); 


"project_type": "javascript", 


"debugMode”" : 1, 
"showFPS" : true, 
"frameRate”" : 60, 
"id" : "gameCanvas", 
"renderMode”" ; 0, 
"engineDir":"frameworks/cocos2d-html5", 
"modules" : ["cocos2d", "extensions"], 
“ti 

"src/resource.js", 

"src/config.ijs" 


1 


图 8-2” ”JSON 格式 示意 图 


控制 台 打印 出 来 的 JSON 数 据 如 图 8-3 所 示 。 


A i 人、 ， 1 CR 
Pp [Object] 
Object {project_type: "javascript", debugMode: 
debugMode: 1 
engineDir: "frameworks/cocos2d-html5" 
frameRate: 60 
id: "gameCanvas" 
pjsList: Array[2] 
pmodules: Array[2] 
project_type: "javascript" 
renderMode: @ 
SshowFPS: true 
proto_: 0| 


图 8-3 ”控制 台 打印 出 JSON 的 格式 信息 


plist 文件 读 取 


plist 文 件 通常 用 于 存储 用 户 设 置 ， 也 可 以 用 于 存储 一 些 成 组 的 配置 信息 


呈 G， 


是 采用 plist 文 件 存储 数据 。plist 赂 式 众多 ， 其 主流 方式 为 XML， 如 图 8-4 所 示 。 


<?xmL version="1.0" encoding="UTF-8"?> 
<!DOCTYPE plist PUBLIC "~//Apple//DTD PLIST 1.0//EN" 
"http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
<plist version="1.0"> 
<dict> 
<key>debugMode</key> 
<integer>1</integer> 
<key>engineDir</key> 
<string>frameworks/cocos2d-html5</string> 
<key>frameRate</key> 
<integer>60</integer> 
<key>id</key> 
<string>gameCanvas</string> 
<key>jsList</key> 
<array> 
<string>"src/config.js",</string> 
<string>"src/resource.js"</string> 
</array> 
<key>modules</key> 
<array> 
<string>cocos2d</string> 
<string>extensions</string> 
</array> 
<key>project_type</key> 
<string>javascript</string> 
<key>renderMode</key> 
<integer>0</integer> 
<key>showFPS</key> 
<true/> 
</dict> 
</plist> 


图 8-4 ”plist 格 式 示意 图 


1, showFPS: true, frameRate: 60, id: "gameCanvas"..} 


例如 粒子 系统 等 都 
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plist 文 件 的 读 取 方式 和 JSON 一 致 ， 其 代码 如 下 : 


1 var plistArray = [ // 定义 要 加 载 的 plist 文 件数 组 

2 "res/unit08_data/config.plist" 

3 

4 // 加 载 plist 文 件 ， 可 以 批量 加 载 ， 读 取出 来 的 数据 保存 在 results 数 组 中 
5 cc.loader.load(plistArray, function(err, results)t{ 

6 

8 


if (err)t 
cc.error ("Failed to load %s, %s ."， plistArray); // 错误 提示 
return; 
9 } 
le) cc.log(results); // 打印 [所 有 加 载 结果 ] 
全 全 cc.log(results[0]); // 打印 [ 读 取 的 第 一 个 plist] 
2) 
控制 台 打 印 出 来 的 plist 数 据 如 图 8-5 所 示 。 
-一 一 -一 -一 一 一 一 -一 一 一 [plist] ————————-—-------- 
Pp [Object] 


voObject {project_type: "javascript", debugMode: 1, showFPS: true, frameRate: 60, id: "gameCanvas"..} 
debugMode: 1 
engineDir: "frameworks/cocos2d-html5" 
frameRate: 60 
id: "gameCanvas" 
pjsList: Array[2] 
pmodules: Array[2] 
project_type: "javascript" 
renderMode: 6 
showFPS: true 
p_proto_: Object 
ee [ES 


图 8-5 控制 台 打 印 出 plist 的 格式 信息 


从 图 8-3 和 图 8-4 可 以 看 出 ，JSON 文 件 格式 较为 简单 ， 而 plist 文 件 的 格式 较为 烦 珊 。 一 般 情况 
下 , JSON 文 件 可 以 像 平常 写 代 码 那 样 , 直接 手动 编写 。 而 plist 文 件 则 由 plist 编 辑 器 去 做 。 在 Mac OS 
下 , 可 以 通过 Xcode、PlistEdit Pro 等 工具 。 在 Windows 系 统 中 , 也 有 plist Editor 等 一 系列 优秀 工具 。 
关于 更 多 的 plist 编 辑 器 ， 读 者 可 自行 网 上 搜索 。 


8.4 SQLite 实现 


相 比 plist 和 JSON 而 言 ，SQLite 可 以 给 我 们 带 来 更 安全 、 更 强大 的 数据 存储 , 但 其 使 用 以 及 学 
习 成 本 也 更 高 了 。 

虽然 在 JSB 上 ，cc.sys.1localstorage 底 层 由 SQLite3 实 现 ， 但 是 Cocos2d-JS 本 身 没 有 将 
SQLite 绑 定 到 JavaScript 上 ， 也 就 是 说 ， 我 们 无 法 在 JavaScript 层 上 指定 要 执行 的 SQLite3 数 据 库 语 
句 。 不 过 ， 我 们 可 以 通过 代码 绑 定 的 方式 自行 实现 ， 相 关内 容 可 参见 第 16 章 的 章节 实例 。 


8.5 ”实例 一 一 解锁 《保卫 葛 卜 2》 的 “天 天 向 上 ”玩法 
实际 上 ， 在 《保卫 葛 下 2》 主 页 面 中 ,“ 天 天 向 上 ”按钮 是 锁 住 的， 如 图 8-6 所 示 。 
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若 “ 天 天 向 上 ”按钮 是 “ 锁 住 ”状态 ， 则 点 击 “ 天 天 向 上 ”按钮 ， 会 出 现 如 图 8-7 所 示 的 对 
话 框 。 图 8-7 所 示 的 功能 本 质 上 是 一 个 内 购 ， 因 为 内 购 需 要 接 入 第 三 方 SDK， 且 可 选 的 SDK 数 量 
繁多 , 每 个 平台 的 接 入 也 都 不 一 样 ， 所 以 这 里 我 将 这 个 功能 简化 , 采用 本 地 数据 存储 的 方式 作为 
本 章 的 实例 。 


图 8-6 


解锁 需 先 完成 极地 冒险 第 24 关 , 是 否 立 即 解锁 ? 


一 3 一 一 一 


y 


“天 天 向 上 ”按钮 锁 图 8-7 “天 天 向 上 ”解锁 对 话 框 


基于 上 一 章 的 实例 ， 我 给 当前 的 Layer 定 义 了 一 个 isUpUnlock 属 性 ， 表 示 是 否 解锁 了 “天 
天 向 上 ”， 其 默认 值 为 false。 此 外 ， 又 添加 了 一 个 loadconfig () 限 数 ， 用 来 人 localsStorage 
中 获取 ijsUpUnlock 的 值 ， 代 码 如 下 : 
// 加 载 [配置 ] 


loadConfig : function(){ 


1 


2 
3 
4 
5 


// 


是 否 已 经 解锁 了 “天 天 向 上 ” 


this.isUpUnlock = cc.sys.localStorage.getItem(Config.IS UP UNLOCK KEY) | | "NO" 


} 


第 4 行 代码 通过 cc.sys.1localSstorage 获 取出 “是 否 已 经 解锁 ”的 值 ，Config.IS_UP_ 


UNLOCK_KI 


EY 是 一 个 字符 串 变 量 , 值得 特别 注意 的 是 , 因为 cc .sys .1ocalStorage 在 JSB 的 底层 


实现 是 SQLite3 ， 并 不 能 像 浏览 器 对 象 中 的 Localstorage 那 样 可 以 直接 存放 布尔 类 型 的 值 ， 所 
以 这 里 用 字符 串 类 型 代替 。 若 cc.svys.1localstorage 取 出 的 值 为 null, 则 让 this.isUpUnlock 
的 值 为 No。 另 外 , 我 在 Carrotsrc 路 径 下 新 建 了 一 个 define.js 文 件 ， 而 config 对 象 就 是 定义 在 此 文 
件 中 ， 代 码 如 下 : 


1 
2 
3 


// 配置 对 象 
Var Config = {}; 
Copfigc.IS_UP_UNLOCK_KEY = "is up unlock key"; 


然后 在 “加 载 菜单 ”按钮 的 方法 中 ,给 “天 天 向 上 ”按钮 加 上 锁 的 精 录 ， 代 码 如 下 : 
// 加 载 [“ 开 始 冒 险 ” 和 “天 天 向 上 ”菜单 ] 


loadMenu : function(){ 


1 
2 
3 
4 
5 
6 
7 
8 


if 


(this.isUpUnlock === "NO") f{ 

var upLock = new cc.Sprite("res/MainMenu/front btn floor locked.png"); 
floor.addChild (upLock); 

this.upLock = upLock; 

upLock.setPosition(floor.width + 5, floor.height / 2 + 25); 
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9 } 
10 // . 
二 二 


我 为 当前 的 Layer 定 义 了 


一 个 upLock 属 性 来 指向 这 个 锁 ， 这 是 因为 在 后 面 解锁 “天 天 向 上 ” 


时 ,可 以 通过 调用 this .upLock.removeFromParent () 函数 来 将 锁 从 当前 Layer 移 除 掉 。 接 着 


在 “天 天 向 上 ”按钮 的 点 击 事件 中 ， 


temSpritel( 


键入 如 下 代码 : 


cc.audioEngine.playEffect (res.sd mm Select mp3); 


ock == "NO") { 


// 分 发 事件 [打开 解锁 面板 ] 


cc.eventManager.dispatchEvent (new cc.EventCustom(jf.EventName.OPEN 


cc.1og("TODO: 实现 “天 天 向 上 ”按钮 的 功能 "); 


1 var floor = new cc.MenuI 
2 floorNormal, 
ee: floorpress, 
4 floorDisabled, 
司 function(){ 
6 
7 if (this.isUpUnl 
8 
9 
UNLOCK_UP_ LAYER)); 
10 } else { 
11 
12 } 
13 }.bind(this)); 
在 上 述 的 代码 中 ， 


个 “打开 解锁 面板 ”的 引 


第 7 行 代码 用 于 判断 “天 天 向 上 ”是 否 已 经 解锁 了 ， 符 未 解锁 ， 则 分 发 一 
和 人 件 。 很 显然 ， 事件 的 设计 是 发 布 者 /订阅 者 的 设计 模式 。 那 么 ,我 们 在 


MainMenuscene 中 实现 “打开 解锁 面板 ”的 事件 监听 。 当 “打开 解锁 面板 ”事件 被 触发 时 ， 


MainMenuScene 便 会 接收 到 这 一 事件 ， 从 而 做 “打开 解锁 面板 ”的 处 理 ， 代 码 如 下 : 
1 registerEvent : function(){ 
2 Var listener = cc.EventListener.createl({ 
3 event : cc.EventListener .CUSTOM, 
4 target : this, 
5 eventName : jf.EventName .OPEN UNLOCK UP_LAYER, 
6 callback : this.onLoadUnlockLayer 
x }); 
8 cc.eventManager.addListener(listener, this); 
9 
10 onLoadUnlockLayer : Eunction(event) 1{ 
11 var target = event .getCurrentTarget (); // 获取 当前 事件 监听 器 的 事件 源 
再 总 target .unlockLayer = new MMUnlockLayer(); 
13 target.addChild(target .unlockLayer); 
14 } 
在 第 5 行 代 码 中 ， 事 件 名 字 jf .EventName .OPEN_UNLOCK_UP_LAYER 也 定义 在 define.js 中 ， 
代码 如 下 : 
1 var jf = {}; // 定义 自己 的 命名 空间 
2 jf.EventName = {}; // 事件 名 字 对 象 
3 jf.EventName.OPEN UNLOCK UP_ LAYER = "open unlock up _ layer"; 
4 jf.EventName .UNLOCK UP = "unlock up"; 


当 名 字 为 jf. 


EventName .OP 


EN_UNLOCK_UP 


_LAYER 的 自 定义 事件 被 触发 时 ，MainMenu 
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Scene 会 调用 onLoadUunlockLayer () 函数 ， 从 而 创建 出 “解锁 天 天 向 上 ”对 话 框 ， 并 将 其 添加 
到 当前 场景 中 。 


MMUnlockLayer 为 一 个 Layercolor， 其 颜色 为 黑色 ， 不 透明 度 为 220， 这 样 可 以 “高 亮 突 
出 ”当前 层 里 面 的 内 容 。MMUnlockLayer 里 的 内 容 是 一 个 对 话 框 ,很 显然 ， 它 属于 UI 控件 。UI 
控件 在 第 10 章 中 会 讲 到 ， 若 此 时 你 看 不 太 懂 下 面 要 编写 的 代码 ， 那 也 无 妨 ， 你 可 以 在 阅读 第 10 
章 之 后 ， 再 回 过 头 来 阅读 本 章 。 下 面 开 始 MMUnlockLayer。 


首先 ， 若 工程 要 用 到 UI 模块 ， 则 需要 在 project.json 中 的 modules 数 组 中 添加 "ccui"， 如 
"modules" : ["cocos2d"， "ccui"]。 然后， 在 MMUnlockLayer 中 ， 我们 需要 先 创 建 一 个 
Layout 来 存放 这 些 UI 控件 ， 代 码 如 下 : 


// 加 载 [Layout] 

loadLayout : function(){ 
var node = new ccui.Layout (); 
this.addChild (node); 
this.layout = node; 
node.setContentSize(cc.winSize);// 设置 内 容 大 小 
node.setTouchEnabled (true); // 开启 触摸 


OJONAODODPp 


} 

Layout 的 默认 大 小 是 cc .size (0，0)， 所 以 在 第 6 行 中 ,我 设置 了 当前 Layout 的 大 小 为 
cc.winsize。 然 后 在 第 7 行 代码 中 开启 了 触摸 事件 ， 这 样 做 是 为 了 “吞噬 ” 掉 UI 的 触摸 事件 ， 
使 得 MMMainLayer 中 的 “开始 冒险 ”和 “天 天 向 上 ”组 成 的 菜单 不 会 被 点 击 到 。 

接着 ， 又 定义 了 一 个 loaqBackground () 函数 来 创建 如 图 8-8 所 示 的 背景 图 片 ， 代 码 如 下 : 


1 // 加 载 [ 背 景 ] 

2 loadBackground : function(){ 

3 Var node = new caui.ImageView!("res/Common/bg/woodbg notice.png"); 
4 this.layout.addChild (node); 

5 this.background = node; 

6 node.setPosition(cc.winSize.width / 2, cc.winSize.height / 2); 

7 


} 

将 背景 添加 到 Layout 中 ， 因 为 这 是 一 个 UI 模块 。 并 且 ， 我 为 当前 的 Layer 定 义 了 一 个 
background 属 性 ， 指 向 了 当前 的 背景 ， 这 是 因为 后 面 要 开发 的 UI 控件 都 需要 以 background 为 
父 节 点 。 


图 8-8 ”对话 框 背景 
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图 8-7 中 所 示 的 锁 、 解 锁 所 需 的 价钱 、 文 本 提示 等 已 经 做 成 了 一 张 图 片 ， 它 的 创建 方式 和 背 
景 是 一 样 的 ， 这 里 不 贴 出 ， 读 者 可 自行 阅读 随 书 源码 。 

剩 下 的 两 个 按钮 的 开发 也 都 大 同 小 异 ， 下 面 以 “确定 ”按钮 为 例 进行 介绍 。 创 建 “确定 ” 按 
钮 的 代码 如 下 : 


1 // 加 载 [“ 确 定 ” 按钮 ] 

2 loadConfirmButton : function(offsetXx, posY)f{ 

3 Var node = new ccui.Button(); 

4 this.background.addChild (node); 

与 node.loadTextures ("res/UI/btn blue m.png", "res/UI/btn blue m pressed.png", 


yy 
6 node.setPosition(this.background.width / 2 - node.width / 2 - offsetx, posY); 
7 node.addTouchEventListener (function(sender, type)t{ 
8 switch (type) { 
9 case ccui.Widget .TOUCH ENDED: 


10 Var event = new cc.EventCustom(jf.EventName .UNLOCK UP); 
本 出 event .setUserDatalt{ 

42 isSuccess : true 

13 }); 

14 cc.eventManager.dispatchEvent (event); 

15 this.removeFromParent (); 

16 break; 

二 又 } 

18 }, this); 

19 // “确定 ”按钮 的 文字 图 片 

20 var infoNode = new ccui.ImageView("res/UI/zh/btn blue m ok.png"); 
2 node.addChild(infoNode); 

22 infoNode.setPosition(node.width / 2, node.height / 2); 

23 } 


说 明 UI 控件 有 一 套 自己 的 触摸 事件 机 制 ， 并 不 需要 我 们 像 第 5 章 中 所 讲 的 那样 给 每 个 控件 派 加 
事件 监听 器 。 


第 5 行 代码 指定 了 按钮 的 三 个 状态 的 纹理 ,分 别 是 正常 状态 、 选 中 状态 、 禁 用 状态 的 纹理 。 
因为 在 此 对 话 框 中 并 没有 禁用 此 按钮 的 需求 ， 所 以 我 给 10adTexture 函 数 的 最 后 一 个 参数 传递 
了 一 个 空 字符 串 。 接 着 ， 第 7 行 代码 给 “确定 ”按钮 添加 了 触摸 事件 ， 当 触摸 抬 起 的 时 候 ， 分 发 
了 一 个 “天 天 向 上 解锁 ”的 事件 ， 事 件 携带 着 “解锁 成 功 ”的 数据 。 最 后 ， 第 15 行 代码 执行 了 从 
父 方 点 删除 当前 层 的 操作 。 

很 显然 , 车 “天 天 向 上 ”解锁 成 功 ， 则 主页 面 中 “天 天 向 上 ” 羔 单 项 中 的 锁 就 应 该 移 除 掉 ， 
所 以 应 该 在 MMMainLayer 中 实现 “天 天 向 上 解锁 ”的 事件 监听 ， 代 码 如 下 : 


1 registerEvent : function(){ 

2 Var listener = cc.EventListener.createl({ 

3 event : cc.EventListener.CUSTOM, 
4 target : this, 

5S eventName : jf.EventName .UNLOCK_UP， 
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callback : this.onUnLockUp 

拘束 
cc.eventManager.addListener (listener, this); 
} 
0 // 解锁 “天 天 向 上 ” 
1 onUnLockUp : function(event){ 
Var target = event .getCurrentTarget (); 
13 var data = event.getUserData(); 
14 if (data.isSuccess !== undefined && data.isSuccess) { 
5 

6 

及 

8 


NO 


// 数据 保存 [解锁 成 功 ] 
cc.sys.localStorage.setItem(Config.IS UP UNLOCK KEY, "YES" ) ; 
target.isUpUnlock = true; 

target .upLock.removeFromParent (); 


当 “ 天 天 向 上 ”解锁 成 功 后 ， 第 16 行 代码 将 解锁 成 功 的 状态 进行 数据 持久 化 。 

至 此 ,“ 天 天 向 上 ”解锁 功能 开发 完毕 。 运 行 项 目 ， 点 击 “ 天 天 向 上 ”按钮 ， 在 弹出 的 对 话 
框 中 点 击 “ 确 定 ”按钮 , 便 可 解锁 成 功 。 当 关闭 游戏 之 后 ,第 二 次 再 启动 游戏 时 ,会 发 现 “ 天 天 
向 上 ”菜单 按钮 上 并 不 会 出 现 锁 了 。 


8.6 小 结 


通过 本 章 的 学 习 ， 我 们 学 习 了 Cocos2d-JS 中 的 数据 持久 化 ， 知 道 了 在 Web 端 数据 持久 化 依赖 
于 windows .localStorage， 而 在 Native 上 数据 持久 化 底层 实现 依赖 于 SQLite3 数 据 库 。 在 
HTML5 上，windows .localStorage 保 存 的 数据 具有 安全 隐患 ， 所 以 ， 除 非 是 一 些 无 关 紧 要 的 
数据 ， 和 否则 我 们 都 应 当 将 数据 放 在 服务 端 。 除 此 之 外 ， 我 们 还 知道 了 与 数据 存储 相关 的 plist 和 
JSON。Pplist 在 做 配置 上 ， 有 非常 明显 的 优势 ，JSON 则 更 多 地 作为 网 络 传输 协议 。 最 后 在 本 章 的 
实例 中 ， 通 过 localstorage 实 现 了 “天 天 向 上 ”的 解锁 功能 。 


本 章 的 参考 资源 如 下 。 


口 Plist 维基 百科 : https://zh.wikipedia.org/wiki/Plist。 
DQ JSON : http://json.org/json-zh.html。 
口 LocalStorage: https://developer.mozilla.org/en-US/docs/Web/APLI/Storage/LocalStorage。 


粒子 系统 


在 游戏 中 ,要 表现 一 些 动画 效果 ， 例 如 奔跑 的 小 人 、 刀 光 效 果 等 ,一 般 可 以 通过 帧 动画 或 者 
骨骼 动画 的 方式 来 实现 ， 然 而 要 表现 火焰 、 烟 花 、 雨 雪 、 水 面 、 烟 雾 等 效果 时 ， 虽 然 采 用 动画 也 
可 以 实现 , 但 总 是 有 些 差强人意 。 一 方面 ， 帧 动画 需要 美术 一 帧 一 帧 的 绘画 ， 这 不 仅 提高 了 项 目 
的 开发 成 本 ,还 增加 了 游戏 安装 包 的 大 小 以 及 运行 时 内 存 的 开销 。 男 一 方面 ， 帧 动画 的 表现 都 是 
预先 设 定好 的 ,这 使 得 动画 的 随机 性 大 大 降低 了 , 效果 的 真实 性 大 打折 扣 。 粒 子 系统 就 是 为 了 解 
决 此 类 问题 而 诞生 的 ， 它 可 以 模拟 自然 界 粒 子 的 运动 状态 ， 让 游戏 的 效果 更 加 逼真 。 

本 章 内 容 : 

口 粒子 系统 概述 

口 Cocos2d-JS 中 的 粒子 系统 

口 ParticleDesigner 编 辑 适 

口 ParticleEditor 编 辑 器 

口 在 Cocos2d-JS 中 使 用 粒子 系统 


9.1 粒子 系统 概述 


粒子 系统 是 计算 机 图 形 学 中 的 一 种 模拟 技术 , 通常 用 来 模拟 一 些 其 他 传统 的 泻 染 方式 难以 实 
现 的 效果 ， 例 如 火焰 、 爆 炸 、 烟 雾 、 水 流 、 落 叶 、 云 、 雾 、 雨 、 雪 、 人 尘 等 。 

粒子 系统 是 一 个 群 组 的 概念 ， 它 由 大 量 的 粒子 组 成 ， 每 个 粒子 都 有 自己 的 速度 、 加 速度 、 大 
小 、 颜 色 、 生 命 周期 以 及 纹理 等 属性 ， 粒 子 的 纹理 图 片 大 小 一 般 为 64x64 像 素 ， 图 片 过 大 ， 则 会 
影响 演 染 性 能 。 

此 外 , 粒子 系统 中 还 存在 一 个 粒子 发 射 器 , 它 将 粒子 系统 中 所 有 的 粒子 以 一 定 的 规则 发 射出 
去 。 因 为 所 有 的 粒子 都 有 自己 的 大 小 、 速 度 等 属性 , 这 些 属性 值 的 不 同 使 得 整个 粒子 产生 了 随机 
性 ,也 构成 了 每 个 粒子 的 表现 形式 以 及 运动 方式 ,整个 粒子 系统 也 就 由 这 些 粒子 组 成 。 每 个 粒子 
系统 都 是 一 个 整体 ， 例 如 一 团 火 、 一 片 云 、 一 股 烟 都 是 一 个 独立 的 粒子 系统 。 
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9.2 ”Cocos2d-JS 中 的 粒子 系统 


在 Cocos2d-JS 中 ， 镁 子 系统 相关 的 类 有 粒子 系统 类 cc .ParticleSystem、 粒 子 系统 批 处 理 


类 cc.ParticleBatchNodqe 、 引 擎 自 带 的 一 些 粒 子 系统 示例 类 ， 例 如 cc.ParticleFire、 
cc.ParticleFitreworks 等 ， 这 些 示 例 都 定义 在 frameworks/cocos2d-htmlS/cocos2d/particle/ 
CCParticleExamples.js 文 件 中 。 


说 明 Cocos2d-JS 中 的 粒子 系统 虽然 在 大 部 分 平台 下 都 支持 得 很 好 ， 但 是 在 Canvas 泻 染 模 式 下 ， 


CC 。 


显得 比较 吃力 ， 会 造成 卡 顿 ， 这 是 因为 Canvas 不 支持 批 处 理 泻 染 (参见 第 11 章 )。 

关于 引擎 自 带 的 示例 粒子 系统 ， 读 者 若 有 兴趣 ， 可 自行 查阅 CCParticleExamples.js 文 件 中 
的 源码 ， 这 里 我 不 打算 讲述 。 因 为 在 实际 开发 中 ， 很 少 手写 粒子 系统 属性 配置 ， 大 部 分 
都 是 采用 粒子 系统 编辑 器 的 方式 实现 。 


ParticleSystem 类 


cc.ParticleSystem 作 为 粒子 系统 类 ， 它 继承 自 cc .Node， 继承 了 cc .Node 所 有 的 属性 和 


函数 。 除 此 之 外 ，cc .ParticleSystem 自 身 定义 了 众多 的 属性 ， 这 些 属性 加 起 来 大 约 有 四 五 十 


I 
De 


虽然 属性 众多 , 但 是 可 以 将 它们 分 为 6 大 组 ,然后 逐个 击破 , 或许 这 是 一 个 不 错 的 掌握 方法 。 
根据 ParticleDesigner ( 见 9.3 节 ) 编辑 器 的 页 面 布局 , 将 粒子 系统 的 属性 进行 分 组 , 具体 如 下 : 
口 粒子 配置 ( Particle Configuration ) 

口 发 射 右 类 型 ( Emitter Type ) 

口 重力 配置 ( Gravity Configuration ) 

口 径 向 配置 ( Radial Configuration ) 

口 发 射 句 位置 ( Emitter Location ) 

口 粒子 纹理 ( Particle Texture ) 

口 粒子 颜色 ( Particle Color ) 

口 混合 模式 ( Blend Function ) 


1. 粒子 配置 


粒子 配置 主要 就 是 粒子 的 基本 属性 ， 如 生命 周期 、 大 小 、 方 向 等 ， 见 表 9-1。 


表 9-1 粒子 系统 基础 配置 属性 表 
类 型 属 性 说 明 


整 型 _totalParticles 最 大 允许 粒子 数量 
整 型 particleCount 当前 粒子 数量 
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( 续 ) 

类 型 属 性 说 明 

浮 点 型 life 粒子 生命 周期 值 〈 秒 ) 

浮 点 型 lifeVar 粒子 生命 周期 浮动 值 ( 秒 ) 

整 型 startSize 粒子 出 生 大 小 

整 型 startSizeVar 粒子 出 生 大 小 浮动 值 

整 型 endSize 粒子 消亡 时 大 小 

整 弄 endSizeVar 粒子 消亡 时 大 小 浮动 值 

整 型 angle 粒子 发 出 方向 角度 

整 型 angleVar 粒子 发 出 方向 角度 浮动 值 

整 型 startSpin 粒子 出 生 时 旋转 角度 

整 型 startSpinVar 粒子 出 生 时 旋转 角度 浮动 值 

整 型 endspin 粒子 消亡 时 旋转 角度 

a enaspinvar 粒子 消亡 时 旋转 角度 浮动 值 

布尔 autoRemoveOnFinish 粒子 发 射 完 毕 之 后 是 否 从 父 节 点 移 除 自身 


需要 说 明 的 是 ， 当 particleCount 大 于 _totalParticles 时 , 粒子 系统 不 再 添加 粒子 ， 当 
有 粒子 死亡 时 , particleCount 会 减 一 , 从 而 又 满足 了 particleCount 小 于 _totalParticles 
的 条 件 ， 整 个 粒子 系统 中 所 有 粒子 的 生成 就 是 围绕 着 这 个 循环 运作 。 


说 明 每 种 属性 的 浮动 值 实际 上 都 是 给 当前 属性 产生 一 个 随机 值 。 例如 ， 菜 一 个 属性 的 浮动 值 
是 5， 那么 产生 随机 数 的 取 值 范围 就 是 [0.0, 5.0]。 注 意 , 这 个 区 间 产 生 的 值 是 一 个 浮 点 型 。 
2. 发 射 器 类 型 
与 发 射 咒 相关 的 属性 有 两 个 ， 一 为 粒子 发 射 咒 模式， 二 是 发 射 咒 持续 时 间 ， 见 表 9-2。 
表 9-2 发射 器 类 型 相关 属性 


类 型 属 性 说 上 明 
浮 点 型 auration 发 射 持续 时 间 
枚 举 类 型 emitterMode 发 射 器 类 型 


发 射 器 的 持续 时 间 表 示 多 少 秒 内 会 持续 发 射出 粒子 ， 其 值 为 浮 点 型 ， 若 auration 被 设置 为 
-1， 则 表示 一 直 循 环 发 射 粒 子 。 

粒子 发 射 器 的 类 型 分 为 重力 ( cc.Particlesystem.MODE_GRAVITY ) 和 半径 ( cc.Particle 
System.MODE_RADIUS ) 模式 ， 在 重力 模式 的 情况 下 ， 每 个 粒子 可 以 拥有 物理 属性 ， 其 特点 是 
让 粒子 达到 自然 物理 效果 。 

3. 重力 配置 

在 重力 模式 下 ， 其 配置 信息 如 表 9-3 所 示 ， 主 要 就 是 重力 值 和 速度 相关 。 
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表 9-3 ”重力 配置 相关 属性 


类 型 属 性 说 明 
cc.p Gravity 重力 值 
浮 点 型 Speed 粒子 的 运动 速度 
浮 点 型 speedVar 粒子 运动 速度 的 浮动 值 
浮 点 型 tangentialAccel 切 向 速度 
浮 点 型 tangentialAccelVar 切 向 速度 浮动 值 
浮 点 型 radialAccel 径 向 速度 
浮 点 型 radialAccelVar 径 向 速度 浮动 值 


4. 径 向 配置 
径 向 模式 下 的 配置 和 重力 模式 下 的 配置 差不多 ， 其 属性 见 表 9-4。 
表 9-4 ” 径 向 配置 相关 属性 


类 型 属 性 说 明 
浮 点 型 startRadius 开始 半径 
浮 点 型 startRadiusVar 开始 半径 浮动 值 
浮 点 型 endRadius 最 小 半径 
浮 点 型 endRadiusVar 最 小 半径 浮动 值 
浮 点 型 rotatePerSecond 粒子 围绕 中 心 点 旋转 的 加 速度 
浮 点 型 rotatePerSecondVar 粒子 围绕 中 心 点 旋转 的 加 速度 浮动 值 


一 


值得 说 明 的 是 , 通过 粒子 系统 编辑 器 编辑 出 来 的 粒子 , 并 没有 给 endRadiusVar 属 性 配置 值 ， 
擎 默认 将 它 设置 为 0。 
5. 发 射 器 位 置 
发 射 器 的 位 置 ， 实 际 上 可 以 理解 为 每 个 粒子 出 生 时 的 位 置 ， 相 关 属 性 见 表 9-5。 
表 9-5 ”发 射 器 位 置 相关 属性 


类 型 属 性 说 明 
ce.p _position 发 射 点 坐标 
cc.p posVar 发 射 点 坐标 浮动 值 


6. 粒子 纹理 
每 个 粒子 都 关联 一 张 纹理 图 片 ， 图 片 的 大 小 尺寸 一 般 建议 在 64x64 像 素 ， 图 片 尺寸 过 大 ， 则 
会 影响 泻 染 性 能 。 其 属性 如 表 9-6 所 示 。 


表 9-6 ”粒子 纹理 
类 型 属 性 说 明 


cc.Texture2D _texture 粒子 的 纹理 
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7. 粒子 颜色 

粒子 颜色 用 于 设置 粒子 在 整个 生命 周期 里 面 的 颜色 变化 , 其 中 包含 粒子 出 生 时 的 颜色 和 到 死 
亡 时 的 颜色 。 在 粒子 的 生命 周期 内 ,粒子 的 颜色 由 出 生 时 的 颜色 渐变 到 死亡 时 的 颜色 ,属性 如 表 
9-7 所 示 。 


表 9-7 粒子 颜色 相关 属性 


类 型 属 性 说 明 
Ge COLOR _startColor 粒子 出 生 时 的 颜色 
GECOLOR _startColorVar 粒子 出 生 时 的 颜色 浮动 值 
COCOLOE _endColor 粒子 死亡 时 的 颜色 
cc.Color —endColorVar 粒子 死亡 时 的 颜色 浮动 值 


8. 混合 函数 

图 元 ( 精灵 和 粒子 等 ) 都 是 逐一 绘制 在 帧 缓冲 ( FrameBuffer ) 中 ， 并 最 终 呈 现在 屏幕 上 的 。 
正 因为 绘制 的 顺序 有 先后 , 所 以 帧 缓冲 中 任意 一 个 位 置 的 像素 颜色 在 绘制 的 过 程 中 都 会 不 断 地 受 
到 两 个 重要 因素 的 影响 : 一 是 当前 已 经 写 人 帧 缓冲 中 的 原 有 颜色 ( 目标 颜色 )， 二 是 下 一 个 图 元 
期 望 提 交 到 该 像素 位 置 的 新 颜色 ( 源 色 )。 


混合 函数 的 作用 就 是 围绕 用 户 指定 的 目标 颜色 与 源 颜 色 进行 一 些 简单 的 运算 , 来 最 终 决定 写 
人 帧 缓冲 中 该 像素 的 新 颜色 。 一些 常见 的 效果 如 半 透 明 、 正 片 徐 底 等 ， 都 可 以 通过 制定 合适 的 混 
合 函 数 来 实现 。 

我 们 可 以 通过 数学 公式 来 表达 一 下 此 过 程 最 简单 的 运算 方式 (新 版 的 OpenGL 支 持 对 混合 函 
数 进行 更 细致 的 配置 )。 现 假设 源 颜色 的 4 个 分 量 ( 红色 、 绿色 、 蓝 色 、alpha 值 ) 为 (Rs, Gs, Bs, As)， 
目标 颜色 的 4 个 分 量 为 (Rd, Gd Bd, Ad)， 又 假设 上 述 所 说 的 两 个 颜色 分 别 有 一 个 乘积 系数 ， 其 中 
源 因子 为 (Sr, Sg, Sb, Sa)， 目 标 因子 为 (Dr Dg, Db, Da)， 则 混合 产生 的 新 颜色 可 以 表示 为 : (Rs x 
Sr+RdxDr,GsxSg+GdxDeg,BsxSb+BdxDb,AsxSa+AdxDa)。 值 得 说 明 的 是 ， 如 果 颜 色 
或 其 对 应 的 系数 的 分 量 被 截取 为 [0.0, 1.0]， 对 应 整数 表示 的 范围 为 [0, 255]。 


在 OpenGL 中 ， 源 因子 和 目标 因子 可 以 通过 glBlendFunc (strc，dqst) 图 数 (WebGL 下 对 应 
blenqFunc(src，aqst) 函数 ) 来 设置 。glBlendFunc 有 两 个 参数 ， 前 者 表示 源 因 子 ， 后 者 表示 
目标 因子 。 这 两 个 参数 可 以 是 多 种 值 ， 表 9-8 列 出 了 所 有 可 选 值 及 其 说 明和 计算 公式 ( 其 中 as、 
ad 为 Alpha Source 和 Alpha Destination 的 缩写 ， 分 别 表 示 源 Alpha 通 道 值 和 目标 Alpha 通 道 值 。 同 理 
ca 为 Constant Alpha 的 缩写 ，cr、cg、cb 也 同 理 )。 
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表 9-8 glBlendFunc 消 数 参 数 可 选 值 


可 选 值 说 明 
ce .ONE 说 明 : 1.0 作 为 因子 
公式 : (ts 
cc .ZERO 说 明 0.0 作 为 因子 
公式 : (05 的 
说 明 源 色 的 Alpha 值 作为 因子 
cc .SRC_ALPHA 公式 ， eh 
CC.SRC_ALPHA_SATURATE 说 明 : 源 色 的 Alpha 值 与 1 减 去 目标 颜色 的 Alpha 值 这 两 者 的 最 小 值 作为 因子 
公式 ， 人 1-adq),，min(as，1- ad), min(as，1 - adq)，min(as， 
1 - adq)) 
cc .SRC_COLOR 说 明 : 源 色 的 颜色 作为 因子 
公式 : (r, g, b, a) 
CC.DST_ALPHA 说 明 : 目标 色 的 Alpha 值 作为 因子 
公式 : (a, a, a, a) 
ce.DsT_COLOR 说 明 ， ”目标 色 的 颜色 作为 因子 
公式 : (r, g, b, a) 
cc .ONE MINUS_SRC_ALPHA 说 明 1 减 去 源 色 的 Alpha 值 作为 因子 
公式 : (1-a,l1-a,1-a,1l1- a) 
说 明 : 1 减 去 源 色 的 颜色 值 作 为 因子 
cc.ONE_MINUS_SRC_COLOR 公式， 人 
说 明 1 减 去 目标 色 的 Alpha 值 作为 因子 
cc.ONE_MINUS_DST_ALPHA 公式 ， en 
说 明 : 1 减 去 目标 色 的 颜色 值 作为 因子 
cc .ONE MINUS_DST_COLOR 公式 ， ee te 
cc.ONE_MINUS_CONSTANT_ALPHA ”说 明 . 1 减 去 一 个 指定 的 常量 Alpha 值 作为 因子 
公式 : (= Ca = Cdr (|=3 Tey = a} 
说 明 : 1 减 去 一 个 指定 的 常量 颜色 值 作为 因子 
cc .ONE MINUS_CONSTANT_COLOR 公式 ， i ee Ts 帮 关 
粒子 系统 的 _blendqFunc 属 性 用 来 保存 源 因子 和 目标 因子 ， 如 表 9-9 所 示 。 
表 9-9 ”粒子 系统 的 _blendFunc 属 性 
类 型 属 性 说 明 
Opject _blendFunc 混合 函数 需要 用 到 的 因子 配置 


其 中 ，_blendqFunc 的 初始 值 如 下 : 


1 this. blendFunc = { 

2 src : cc.BLEND SRC, // 源 因子 
3 dst : cc.BLEND DST // 目标 因子 
4 }; 
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需要 指明 一 点 , 混合 函数 并 不 只 服务 于 粒子 系统 , 它 是 属于 演 染 层 的 东西 ， 所 以 在 其 他 可 视 
节点 上 依旧 可 用 。 


说 明 Canvas 不 支持 混合 函数 。 
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前 面 提 到 过 ,在 一 个 粒子 系统 中 ， 有 四 五 十 个 属性 ， 如 果 通 过 代码 的 方式 实现 ， 是 一 件 非 常 
痛苦 的 事情 。 一 方面 ,一 个 成 功 的 粒子 往往 都 是 精 雕 细 磨 ， 不 断 调 整 参数 之 后 才 得 到 的 。 男 一 方 
面 ， 如 果 通 过 代码 的 方式 实现 ,那么 每 次 调整 一 个 属性 ， 都 需要 再 次 运行 一 下 项 目 , 才 可 以 看 到 
效果 ， 这 无 疑 是 一 种 笨拙 且 费 时 的 方法 ,间接 增加 了 项 目的 开发 成 本 。 在 实际 开发 中 ,我 们 一 般 
通过 编辑 器 的 方式 去 调 出 理想 的 粒子 系统 。 

ParticleDesigner 是 一 款 非 常 出 色 的 商业 粒子 系统 编辑 器 ， 它 不 仅 提 供 了 粒子 模拟 器 ， 实 现 
了 “所 见 即 所 得 ”， 而 且 还 提供 了 大 量 的 示例 ， 但 是 较为 遗憾 的 是 ，ParticleDesigner 编 辑 器 仅 支 
持 Mac OS 系统 ， 其 下 载 地 址 是 : https://71squared.com/particledesigner 。ParticleDesigner 的 软件 
页 面 如 图 9-1、 图 9-2 和 图 9-3 所 示 。 
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性 调整 面板 


图 9-1 是 粒子 效果 预览 窗口 ， 可 以 最 直观 地 看 到 调 出 来 的 粒子 长 什么 样 。 在 预览 窗口 上 方 有 3 
个 按钮 ， 从 左 往 右 分 别 是 Orientation 、iPad/iPhone 和 Clear Background。Orientation 用 于 调整 屏幕 


方向 ， 


图 9-2 为 ParticleDesigner 自 带 的 粒子 示例 ， 图 9-3 是 粒子 
出 你 想 要 的 粒子 效果 。 在 


iPad/iPhone 用 于 切换 iPhone 或 者 Pad 预 览 窗口 ，Clear Background 用 于 清除 背景 颜色 。 


遇 性 配置 面板 ， 
图 9-2 和 图 9-3 顶部 的 工具 栏 中 ， 都 有 7 个 按钮 ， 分 别 是 Load、 


可 以 通过 修改 这 些 


上 


国 


Save 、Save as、Randomize 、Pause 、Loop Emitter 和 Emitter Config/Shared Emitters， 下 面 简要 介绍 


一 下 它们 。 


D Save: 


D Loop Emitter: 
DQ Emitter Config/Shared Emitters : 


一 个 复 选 框 ， 用 于 控 


口 Load: 用 于 加 载 先前 编辑 好 的 粒子 文件 。 
用 于 保存 当前 修改 。 

口 Save as: 另存 为 。 
口 Randomize: 将 粒子 各 个 属性 随机 化 ， 即 随机 生成 一 个 粒子 系统 。 
口 Pause: 暂停 粒子 模拟 效果 。 


制 粒 子 预览 是 否 循环 发 射 。 
用 于 在 图 9-2 和 图 9-3 之 间 进 行 切换 。 


9.4 ParticleEditor 编辑 器 135 


l 


需要 说 明 的 是 ， 编 辑 嚣 上 的 粒子 属性 、 编 辑 器 生成 的 plist 文 件 以 及 cc .ParticleSystem 类 
的 属性 这 三 者 之 间 的 属性 名 称 并 不 一 样 。 例 如 粒子 的 起 始 大 小 ， 在 ParticleDesigner 中 用 Start Size 
来 表示 ， 而 在 生成 的 plist 文 件 中 则 用 s tartParticleSize 表 示 , 在 最 后 的 cc .ParticleSystem 
类 中 , 却 是 用 startsize 属 性 表示 。 你 可 以 在 cc. ParticleSystem 类 的 ijnitwithDictionary 
(dictionary，dirname) 限 数 中 看 到 从 plist 文 件 到 cc .ParticleSystem 类 属性 的 转换 过 程 。 

虽然 这 三 者 有 差异 ， 但 是 并 不 需要 你 过 于 关注 ， 只 需 将 编辑 好 的 粒子 导出 ， 然 后 添加 到 
Cocos2d-JS 中 即 可 ， 详 见 9.5 节 。 


orl 


9.4 ParticleEditor 编辑 器 


在 Windows 上 一 直 都 不 缺 好 的 开发 工具 , 但 是 粒子 编辑 器 却 没有 做 得 比较 好 的 。 就 目前 而 言 ， 
Particle Editor 算 是 在 Windows 上 面 做 得 最 突出 的 了 ， 图 9-4 为 Particle Editor 的 主 界面 。 
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图 9-4 Particle Editor 的 主 界面 


Particle Editor 的 下 载 地 址 为 : https://code.google.com/p/cocos2d-windows-particle-editor/ 
downloads/detail?name=ParticleEditor%20V2.0.7z&can=2&q= (由 于 此 链接 较 长 ， 所 以 会 在 随 书 代 
码 中 贴 出 )。 除 此 之 外 ， 其 他 的 下 载 途径 很 多 ， 你 可 以 自行 到 网 上 搜索 。 
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Particle Editor 的 顶部 菜单 栏 有 3 个 菜单 项 ， 其 中 File 一 New 用 于 新 建 一 个 粒子 系统 模板 ， 
File 一 Open 用 于 加 载 粒 子 plist 文 件 ，File 一 Save 用 于 保存 当前 更 改 ，File 一 Save as 用 于 将 当前 
文件 另存 为 新 文件 。Samples 菜 单项 里 面 主 要 提供 了 一 些 已 经 编辑 好 的 粒子 模板 ， 最 后 的 Help 
菜单 项 里 只 有 一 个 About 选 项 。 


下 方 黑色 的 网 格 面板 是 粒子 的 预览 窒 口 ,预览 窗口 右边 的 列表 是 粒子 的 属性 配置 面板 , 通过 
它 可 以 调 出 理想 的 粒子 。 


9.5 在 Cocos2d-JS 中 使 用 粒子 系统 


调整 完 粒 子 配 置 后 ， 可 以 通过 Save as 菜单 项 导出 一 个 plist 配 置 文件 。Particle Designer 还 会 导 
出 一 张 PNG 纹 理 图 ， 如 图 9-5 所 示 。 


Save As: fire og 
Tags: 
Where: 出 桌面 加 
File Format: “cocos2d (plist) 四 
Embed texture 
Texture File Name: fire 
Texture Format: PNG ?| 
cancel | EE 


图 9-5 ”使 用 Particle Designer 导 出 plist 格 式 的 粒子 文件 

在 plist 文 件 中 ， 有 一 个 key 为 textureFileName 的 键 值 对 ， 通过 修改 这 个 键 值 对 的 值 可 以 直 
接替 换 掉 粒 子 的 纹理 贴图 。 你 也 可 以 点 击 图 9-$ 中 的 Embed texture 复 选 框 ， 将 纹理 图 片 直接 保存 
在 plist 文 件 中 ， 这 种 方式 实际 上 是 把 纹理 图 片 转 为 Base64 的 格式 。 


将 plist 配 置 文件 和 和 PNG 纹理 图 片 在 resource.js 文 件 中 声明 后 ,通过 如 下 代码 便 可 以 创建 出 一 个 
粒子 系统 : 


var particle = new cc.ParticleSystem(res.u9 fire plist); 
this.addChild(particle); 
3 particle.setPosition(cc.winSize.width/2, cc.winSize.height/2); 


在 上 述 代码 中 ， 第 1 行 代码 通过 cc. Particlesvstem 类 来 构造 一 个 粒子 系统 对 象 ， 其 构造 
函数 接收 一 个 plist 文 件 路 径 作 为 参数 ，cc.Particlesystem 类 内 部 会 解析 该 文件 ， 并 创建 节点 
对 象 。 第 2 行 代 码 的 this 表 示 的 是 当前 层 ， 也 可 以 是 某 一 个 节点 。 运 行 效果 如 图 9-6 所 示 。 


1 
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图 9-6 火 的 粒子 效果 


虽然 在 Cocos2d-JS 游 戏 引 敬 中 使 用 粒子 系 乡 


9.6 小 结 


非常 简单 方便 ,但 是 想 在 编辑 器 中 调整 出 一 个 满 
意 的 粒子 效果 并 不 简单 。 在 实际 开发 中 , 一 般 会 选择 在 编辑 占 自 带 的 示例 
效果 类 似 的 粒子 ， 然 后 基于 这 个 粒子 进行 修改 。 


找到 一 个 和 你 想 要 的 


通过 本 章 的 学 习 ， 我 们 了 解 了 粒子 系统 的 作用 及 其 各 个 属性 配置 。 学 会 了 在 Mac OS X 和 


Windows 下 使 用 粒子 编辑 器 ， 也 知道 了 想 要 快速 调 出 一 个 自己 满意 的 粒子 效果 ， 可 以 在 
ParticleDesigner 编 辑 需 自 带 的 示例 中 找到 一 个 效果 和 我 们 想 要 的 效果 类 似 的 粒子 ， 在 这 个 粒子 上 


进行 调整 ， 可 以 最 快 地 得 到 你 想 要 的 粒子 效果 。 


另外 , 还 知道 了 Canvas 泻 染 模式 下 粒子 系统 


的 泻 


染 性 能 支持 得 不 是 很 好 。 这 是 因为 Canvas 不 支持 批 处 理 绘制 ， 所 以 在 Canvas 中 ， 可 以 采用 简单 的 


帧 动画 模拟 出 粒子 系统 的 效果 。 


9.7 参考 资源 
本 章 的 参考 资源 如 下 。 


口 Particle system: https://en.wikipedia.org/wiki/Particle system。 
DD glBlendFunc : https:/www.opengl.org/sdk/docs/man/html/glBlendFunc.xhtml。 


一 款 游戏 除了 核心 玩法 、AI( Artificial Intelligence， 人 工 智能 ) 之 外 , 还 有 UI(User Interface， 
用 户 界面 ) 等 。UI 指 的 是 商店 、 包 里 、 排 行 榜 等 这 样 的 模块 。Cocos2d-JS 在 3.0 版 本 之 后 ,提供 了 
一 套 较 为 完善 的 UI 控件 ， 这 让 我 们 开发 UI 模块 变 得 简单 许多 ， 这 些 UI 控 件 的 源码 位 于 
cocos2d-x/web/extensions/ccui/uiwidgets 目 录 下 。 
本 章 内 容 : 
口 ccui .Widget 父 类 
口 ccui .Text 文 本 
口 ccui .Button 按 钮 
口 ccui .CheckBox 复 选 框 
口 ccui .Slider 滑 块 
口 ccui .ImageView 图 片 视图 
口 ccui .LoadingBar 加 载 条 
口 ccui .TextField 编 辑 框 
口 ccui .Layout 布 局 
口 ccui .ScrollView 深 动 视图 
口 ccui .PageView 分 页 视图 
口 ccui .ListView 列 表 视 图 
口 实例 一 一 《保卫 萝卜 2》 关 卡 选择 页 面 的 开发 


10.1 ccui .widget 父 类 


在 Cocos2d-JS 中 ，UI 的 命名 空间 为 ccui。ccui .widget 是 所 有 UI 控件 的 父 类 ， 而 ccui. 
Wigdget 又 间接 继承 自 cc .Node， 这 使 得 所 有 的 UI 控件 都 具有 cc .Node 的 特性 ; 也 就 是 说 ， 每 个 
UI 控件 都 可 以 有 坐标 、 大 小 等 属性 ， 也 可 以 运行 动作 等 。 

既然 ccui .Widget 是 所 有 UI 控件 的 父 类 ， 那 么 我 想 你 非常 有 必要 熟悉 一 下 ccui .widget 都 
有 哪些 常用 的 API。 这 里 我 将 ccui .widget 和 触摸 相关 的 API 提 取出 来 ， 如 表 10-1 所 示 。 
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说 明 使 用 UI 控 件 ， 需 要 在 projectjson 的 modules 数 组 中 添加 "ccui" 字 符 串 ， 代 码 如 下 : 


1 "modules" : ["cocos2d", "ccui"], 


表 10-1 ccui .widget 中 与 触摸 相关 的 API? 


返回 值 类 型 参数 类 型 函 数 说 明 
无 Boolean setTouchEnabled (isEnable) 设置 是 否 启 用 触摸 事件 
Boolean 无 isTouchEnabled() 判断 是 否 启用 触摸 事件 
无 Function addTouchEventListener ( 添加 触摸 事 件 的 回调 函数 
Object selector, target) 
无 Boolean setPropagateTouchEvents ( 设置 触摸 事件 是 否 人 允许 向 上 传播 到 父 节 点 
isPropagate) 
Boolean 无 isPropagateTouchEvents () 获取 触摸 事件 是 否 允 许 向 上 传播 到 父 节 点 
的 结果 
无 Boolean setSwallowTouches (isSwallow) 设置 控件 是 否 吞 哦 触摸 事件 
Boolean 无 isSwallowTouches () 判断 控件 是 否 厨 叭 触摸 事件 
Boolean cc.Touch onTouchBegan (touch, event) 触摸 事件 开始 时 的 回调 函数 
Se Eventk 
无 ce ToucH onTouchMoved (touch, event) 触摸 事件 中 触 点 移动 时 的 回调 函数 
Gu Event 
无 cc.Touch onTouchEnded (touch, event) 触摸 事件 结束 时 的 回调 函数 
cc.Event 
无 cc.Point onTouchCancelled (touchpoint) 触摸 事件 取消 时 的 回调 函数 
从 表 10-1 可 以 得 出 ， 所 有 的 UI 控件 都 支持 触 措 事件。 触摸 开关 默 认 是 关闭 的 ， 你 需要 通过 


setTouchEnabled (isEnable) 函数 启用 触摸 ， 并 且 需 要 给 控件 添加 一 个 触摸 事件 监听 器 ， 代 
公 如 下 : 


1 node.addTouchEventListener (function(sender, type) { 

2 switch (type) { 

3 case ccui.Widget .TOUCH BEGAN: // 触摸 事件 开始 时 响应 
4 break; 

5 case ccui.Widget .TOUCH MOVED: // 触摸 事件 中 触 点 移动 时 响应 
6 break; 

7 case ccui.Widget .TOUCH ENDED: // 和 触摸 事件 结束 时 响应 
8 break; 

9 case ccui.Widget .TOUCH CANCELED: // 触摸 事件 取消 时 响应 
10 break; 

11 default: 

12 break; 


Qa 在 本 章 的 表 中 ,，“ 参 数 类 型 ”与 “函数 ”中 的 参数 是 一 一 对 应 的 ， 即 有 几 个 参数 ， 表 中 就 会 一 一 对 应 地 列 出 多 少 
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UI 控 件 


13 » 
14 }.bind(this)); 


可 以 发 现 , UI 控件 的 触摸 并 不 需要 像 给 精灵 添加 触摸 
内 ，UI 默 认 的 有 效 触摸 


setSwallowTouches (isSwallow) 国 数 接口 ， 


区 域 为 自身 的 大 小 。 


这 使 和 


ccui .Widget 还 有 启用 或 禁用 状态 ， 其 API 如 表 10-2 所 示 。 


和 件 那 样 手动 判 


表 10-2 ccui .wiqget 中 启用 相关 的 API 


断 触 点 是 否 在 精灵 区 域 
另外 ， 在 Cocos2d-JS 3.3 之 后 ， 引 擎 提供 了 
续 UI 探 件 的 触摸 也 支持 事件 穿 透 了 。 


返回 值 类 型 参数 类 型 函 数 说 明 
无 Boolean setEnabled (isEnabled) 设置 是 否 启用 控件 
Boolean 无 isEnabled () 获取 控件 是 否 启用 的 结果 


每 个 UI 控件 都 可 以 设置 启用 或 者 禁用 ， 默认 值 为 Ltrue。 如 果 设 置 为 false， 则 控件 是 禁用 


的 ， 不 会 响应 触摸 事件 。 


setBright (isBright) 


表 10-3 ”ccui .widget 中 高 亮相 关 的 API 


用 来 设置 控件 的 高 亮 显示 ， 其 相关 API 如 表 10-3 所 示 。 


返回 值 类 型 参数 类 型 函 数 说 明 

无 Boolean setHighlighted (isHighlight) 设置 控件 状态 为 高 亮 状 

Boolean 无 isHighlighted() 获取 控件 是 否 处 于 高 亮 状态 的 结果 
无 Boolean setBright (isBright) 设置 控件 是 否 高 亮 

Boolean 无 isBright () 获取 控件 是 否 高 亮 的 结果 

无 Number SetBrightStyle (brightstyle) 设置 控件 的 高 亮 风 格 


ccui 里 面 的 所 有 控件 都 有 3 种 状态 
控制 UI 控件 是 否 变 灰 ， 奉 pbright 为 true， 则 还 


bright 属性 


的 外 观 为 不 可 用 状态 ,除了 setE 


否则 外 观 不 会 改变 


另外 ，brightstyle 的 可 取 值 如 下 。 


口 ccui .Widget.BRIGHT_SmTYLE_NORMAL ， 表 示 控 件 


: normal、 highlignt 和 disabled。 


不 需要 判断 highlight 是 否 为 
true， 如 果 是 true， 则 是 highlignt 状 态 , 否则 是 normal 状 态 。 所 以 ， 如 果 你 想 改 变 一 个 控件 


在 正常 状态 。 


口 ccui .Widget .BRIGHT STYLE HIGH LIGHT: 表示 控件 处 于 高 


亮 状 态 。 


Enabled (false) 以 外 ， 还 需要 调用 setBright (false) 国 数 ， 


此 外 ，ccui .wigdg ee 如 表 10-4 所 示 。 焦 点 就 是 你 当前 选中 了 
焦点 。 例 如 按 下 了 某 个 按钮 , 或 者 通过 其 他 的 某 种 方式 选中 了 某 个 控 


哪个 控件 ， 


该 控件 就 获得 了 
件 ， 那 么 此 控件 就 获得 了 焦 


+ 如 果 是 可 编辑 的 控件 ， 例 如 编辑 框 


( 见 10.8 节 )， 则 会 有 一 个 一 
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闪 一 闪 的 竖 线 在 那 。 如 果 是 不 可 编辑 的 控件 ， 一 般 也 会 有 些 高 亮 显 示 。 


表 10-4 ccui .widget 中 焦点 相关 的 API 

返回 值 类 型 参数 类 型 函 数 说 明 
Boolean 无 isFocused() 查询 是 否 拥 有 和 焦点 
无 Boolean setFocused (focus) 切换 控件 是 否 拥有 和 焦点 
Boolean 无 isFocusEnabled() 查询 是 否 允 许 接受 焦点 
无 Boolean setFocusEnabled (enable) 切换 是 否 人 允许 接受 焦点 
无 无 requestFocus () 请 求 获取 焦点 
无 ccui.Widget onFocusChange (lostFocus，getFocus) ， 焦点 更 改 事件 发 生 时 会 调用 此 方法 

ccui .Widget 

ccui .Widget EE getCurrentFocusedWidget () 获取 当前 拥有 焦点 的 控件 


ccui .Widget 基 于 cc .Node 之 上 还 扩展 了 一 些 和 位 置 有 关系 的 快捷 API, 例如 获取 控件 左 
界 在 父 节点 坐标 系 中 的 位 置 ， 如 表 10-$ 所 示 。 


区 


表 10-5 ccui .widget 中 位 置 相 关 的 快捷 API 


返回 值 类 型 参数 类 型 函 数 说 明 
Number 无 getLeftBoundary () 获取 左边 界 在 父 节 点 坐标 系 中 的 位 置 
Number 天 getBottomBoundary () 获取 下 边界 在 父 节 点 坐标 系 中 的 位 置 
Number 无 getRightBoundary () 获取 右边 界 在 父 节 点 坐标 系 中 的 位 置 
Number 无 getTopBoundary () 获取 上 边界 在 父 市 点 坐标 系 中 的 位 置 
ce.p 无 getWorldPosition() 获取 控件 在 世界 坐标 系 中 的 位 置 
最 后 ， 剩 下 一 些 零 碎 的 API， 了 解 一 下 即 可 ， 如 表 10-6 所 示 。 


表 10-6 ccui .widget 百分比 和 启用 布局 组 件 API 


返回 值 类 型 参数 类 型 函 数 说 明 
Number 无 getSizePercent () 获取 控件 的 百分比 尺寸 
无 Number setSizePercent (percent) 设置 控件 的 百分比 尺寸 
Boolean 无 isLayoutComponentEnabled() 获取 是 否 启用 布局 组 件 的 结果 
无 Boolean setLayoutComponentEnabled (isEnable) 设置 是 否 启用 布局 组 件 


10.2 ”ccui .mext 文本 


Text 文 本 用 来 显示 玩家 的 名 字 、 等 级 、 铬 石 数量 等 ， 它 和 cc.Label 标 签 类 似 ， 也 分 为 TTF、 
BMFont 和 Atlas 三 种 类 型 。 


142 第 10 章 ”UU 控件 


10.2.1 ccui .mext 字体 文本 
ccui .Text 支 持 TTF 字 库 ， 创 建 一 个 ccui .Text 文 本 的 代码 如 下 : 


1 var node = new ccui.Text ("我 是 Text 文 本 ", "AmericanTypewriter",30); 


其 中 , AmericanTypewriter 为 系统 自 带 的 TTF 字 体 ，30 为 字号 大 小 。ccui .Text 的 构造 函数 以 
及 参数 说 明 如 表 10-7 所 示 。 


表 10-7 ccui .Text 构 造 函 数 以 及 参数 说 明 


构造 函数 ccuzi .Text (textContent, fontName, fontSize); 
人 参 数 参数 说 明 
textContent 文本 内 容 
参数 列表 要 
fontName 字体 文件 或 字体 名 称 
fontSize 字体 大 小 


此 外 ，ccui .Text 常 用 哺 数 如 表 10-8 所 示 。 


表 10-8 ”cc .mext 常 用 函数 


返回 值 类 型 参数 类 型 函 数 说 明 

String 无 getString() 获取 内 容 

无 String setString (text) 设置 内 容 

cc.Size 无 getFontSize() 获取 字号 大 小 

无 cc.Size setFontSize(size) 设置 字号 大 小 

String 无 getFontName () 获取 字体 文件 或 名 称 

无 String setFontName (name) 设置 字体 文件 或 名 称 

cc .Color 无 getTextColor () 获取 文本 颜色 

无 (Sioa Slo ele setTextColor (color) 设置 文本 颜色 

Number 无 getType() 获取 类 型 

Number 无 getTextHorizontalAlignment () 获取 文本 水 平 对 齐 方式 

无 Number setTextHorizontalAlignment (alignment) 设置 文本 水 平 对 齐 方式 

Number 无 getTextVerticalAlignment () 获取 文本 垂直 对 齐 方式 

无 Number setTextVerticalAlignment (alignment) 设置 文本 垂直 对 齐 方 式 

无 Qe.:COLGE enableShadow (shadowColor, 启用 文本 阴影 效果 , 仅 TTF 字 
cc.Size Number offset, blurRadius) 体 对 象 有 效 

万 cc.Color enableOutline (outlineColor, 启用 文本 描 边 效果 , 仅 TTF 字 
cc.Size outlineSize) 体 对 象 有 效 

无 cc.Color enableGlow (glowColor) 启用 文本 发 光 效 果 , 仅 TTF 字 

体 对 象 有 效 


10.2 ccui.Text 文 本 
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其 中 ,文本 类 型 可 取 的 值 如 下 所 示 。 


10.2.2 ccui 


口 ccui .Text .Type.SYSTEM: 表示 系统 字体 。 

口 ccui .Text .Type.TTF: 表示 TTF 文 件 字 体 。 
水 平 对 齐 方 式 可 取 的 值 如 下 所 示 。 

口 cc .TEXT_ALIGNMENT_LEFT: 表示 左 对 齐 。 

口 cc .TEXT_ALIGNMENT_CENTER: 表示 居中 对 齐 。 
口 cc .TEXT_ALIGNMENT_RIGHT: 表示 右 对 齐 。 


垂直 对 齐 方式 可 取 的 值 如 下 所 示 。 


口 cc .VERTICAL TEXT ALIGNMENT TOP: 表示 上 对 齐 。 
口 cc .VERTICAL TEXT ALIGNMENT CENTER: 表示 居中 对 齐 。 
口 cc .VERTICAL TEXT ALIGNMENT BOTTOM: 表示 下 对 齐 。 


.TextBMFont 位 图 文本 


ccui.TextBMFont 与 cc.LabelBMFont 类 似 ， 它 支持 FNT 类 型 的 文件 。 创 建 一 个 ccui. 
TextBMFont 的 代码 如 下 : 


1 var node 


= new ccui.TextBMFont ("12345", "res/unit10 ui/fonts/number.fnt"); 


其 中 , 12345 为 设置 的 文本 内 容 , res /unit10_ui/fonts/number.fnt 为 指定 的 FNT 字 体 文件 ， 
FNT 字 体 文件 的 制作 见 3.7.4 节 。 


ccui .TextB 


Font 的 构造 函数 以 及 参数 说 明 如 表 10-9 所 示 。 


表 10-9 ”ccui .TextBMFont 构 造 函 数 以 及 参数 说 明 


构造 函数 ccui.TextBMFont (text, filename) 

参 数 参数 说 明 
参数 列表 text 文本 内 容 

fontName 字体 文件 或 字体 名 称 


此 外 ，ccui .TextBMFEont 和 常用 函数 如 表 10-10 所 示 。 


表 10-10 ”ccui .mextBMFont 常 用 函数 


返回 值 类 型 参数 类 型 函 数 说 明 
String 无 getString () 获取 文本 内 容 

无 String setstring (value) 设置 文本 内 容 

无 


String setFntFile(fileName) 设置 FNT 字 体 文 件 或 者 字体 名 称 
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10.2.3” ccui .TextAtlas 字符 映射 文本 


ccui.TextAtlas 为 字符 映射 文本 ,与 cc.LabelAtlas 也 是 类 似 的 。 创 建 一 个 ccui. 
TextAtlas 对 象 的 代码 如 下 : 


1 varnode = new ccui.TextAtlas("789", "res/unit10 ui/fonts/score.png", 40, 50, '0'); 


ccui .TextaAtlas 的 构造 函数 以 及 参数 说 明 如 表 10-11 所 示 。 


表 10-11 ccui .mextaAtlas 构 造 函 数 以 及 参数 说 明 


ee 
参 数 参数 说 明 
strText 文本 内 容 
charMapFile 图 片 名 称 
参数 列表 itemwidth 每 个 “小 块 ”的 宽度 
itemHeight 每 个 “小 块 ”的 高 度 
startCharMap 起 始 字 符 


此 外 ，ccui .TextaAtlas 和 常用 的 函数 如 表 10-12 所 示 。 


表 10-12 ccui .TextaAtlas 常 用 函数 


返回 值 类 型 参数 类 型 函 数 说 明 
String 无 getstring() 获取 文本 内 容 
无 String setString (value) 设置 文本 内 容 


10.3” ccui .Button 按钮 


按钮 (ccui .Button ) 可 以 响应 回调 函数 ， 实 现 一 些 逻 辑 处 理 。 按 钮 的 使 用 方式 也 比较 简 
单 ， 创 建 代 码 如 下 : 


1 // 加 载 [按钮 ] 
2 loadButton : function(){ 
3 Var node = new ccui.Button(); 
4 this.addChild (node); 
5 node.loadTextures (res.ul0 btn start normal png, res.ul0 btn start pressed 
png, "™"); 
6 node.setPosition(200, cc.winSize.height / 2); 
到 node.setTouchEnabled (true); 
8 node.addTouchEventListener (this.onButtonTouchEvent, this); 
9 
其 中 ,第 5 行 代码 用 于 设置 按钮 3 个 状态 的 纹理 ， 这 3 个 状态 分 别 是 常态 、 按 下 和 禁用 。 你 也 可 以 


将 这 3 个 纹理 直接 放 在 构造 函数 中 ， 就 像 下 面 这 样 : 
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1 var node = new ccui.Button(res.ul0 btn start normal png, res.ul0 btn start 
pressed png, ""); 


ccui .Button 的 构造 函数 以 及 参数 说 明 如 表 10-13 所 示 。 


表 10-13 ”ccui .Button 构 造 函 数 以 及 参数 说 明 


构造 函数 ccui .Button (normalImage, selectedImage, disableImage, texType) 
参 数 参数 说 明 

DormalImage 常态 纹理 Ey 片 

参数 列表 selectedImage 按 下 纹理 图 片 
disableImage 禁用 纹理 图 

texType 纹理 图 片 类 型 


其 中 texType 可 取 的 值 如 下 。 


口 ccui .Widget .LOCAL _TEXTURE: 表示 本 地 单 张 图 片 (小 图 ) 类 型 。 
口 ccui .Widget .PLIST _TEXTURE: 表示 精灵 表单 (大 图 ) 类 型 。 
另外 ， 第 7 行 代码 设置 了 按钮 可 以 触摸 。 实 际 上 ， 每 一 个 按钮 都 需要 手动 开启 触摸 ， 并 为 此 


按钮 添加 事件 监听 器 ， 如 第 8 行 代码 。onButtonTouchEvent 是 一 个 事件 回调 函数 ， 具 体 代 码 如 
下 : 


1 onButtonTouchEvent : function(sender, type) { 
2 switch (type) { 
3 case ccui.Widget .TOUCH BEGAN: // 触摸 [ 按 下 ] 
4 cc.log("Touch Down"); 
5 sender.x += 100; // 按钮 坐标 右 移 100 
6 break; 
7 case ccui.Widget .TOUCH MOVED: // 触摸 [移动 ] 
8 cc.log("Touch Move"); 
9 break; 
0 case ccui.Widget .TOUCH ENDED: // 触摸 [ 抬 起 ] 
1 cc.log("Touch Up"); 
2 break; 
3 case ccui.Widget .TOUCH CANCELED: // 触摸 [取消 ] 
4 cc.log("Touch Cancelled"); 
ls break; 
1 default: 
7 break; 
8 } 
9: 
第 1 行 代码 中 的 参数 sengder 为 事件 源 ， 即 按钮 自身 ， 按 钮 被 按 下 之 后 ， 按 钮 将 右 移 100 个 单 


位 ， 这 在 第 5 行 代码 中 实现 。 
另外 ，ccui .Button 的 3 个 状态 的 纹理 也 可 以 通过 表 10-14 中 的 API 进 行 设 定 。 
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表 10-14 ”ccui .Button 的 3 个 状态 纹理 的 相关 函数 


返回 值 类 型 ”参数 类 型 函 数 说 明 

无 String loadTextures (normal, selected, 加 载 按钮 的 纹理 以 及 纹理 类 型 
String disabled, texType) 
String 
umber 

无 String loadTextureNormal (normal, texType) 加 载 按钮 正常 状态 的 纹理 
umber 

无 String loadTexturePressed (selected, texType) 加 载 按 钮 选中 状态 纹理 
umber 

无 String loadTextureDisabled(disabled, texType) 加 载 按 钮 禁用 状态 的 纹理 


umber 


此 外 ，ccui .Button 支 持 九宫 格 , 你 可 以 通过 表 10-15 中 的 API 设 置 启 用 九宫 格 按 钮 。 启 用 
了 九宫 格 按钮 之 后 ， 你 可 以 通过 setcontentSize 函 数 来 设置 按钮 的 大 小 。 


表 10-15 ”ccui .Button 九 宫 格 相关 的 函数 


返回 值 类 型 参数 类 型 函 数 说 明 
Boolean 无 isScale9Enabled() 判断 按钮 是 否 为 九宫 格 模式 
无 Boolean setScale9Enabled (enable) 设置 按钮 为 九宫 格 模 式 


九宫 格 的 按钮 大 小 可 以 随意 设 定 , 这 意味 着 , 按钮 中 不 会 有 美术 做 好 的 字体 在 上 面 ,你 可 以 
通过 表 10-16 中 相关 的 API 给 按钮 添加 一 些 文本 内 容 。 


表 10-16 ”cecui .Button 文 本 内 容 相 关 函 数 


返回 值 类 型 参数 类 型 函 数 说 明 
String 无 getTitleText () 获取 按钮 文本 内 容 

无 String setTitleText (text) 设置 按钮 文本 内 容 
cc.Color 无 getTitleColor () 获取 按钮 文本 颜色 

无 CC.Color setTitleColor (color) 设置 按钮 文本 颜色 
cc.Size 无 getTitleFontSize() 获取 按钮 文本 字号 大 小 
无 cc.Size setTitleFontSize (size) 设置 按钮 文本 字号 大 小 
String 无 getTitleFontName () 获取 按钮 文本 名 字 

无 String setTitleFontName (fontName) 设置 按钮 文本 名 字 


在 实际 开发 中 ,你 可 能 遇 到 的 需求 是 按钮 仅 有 一 张 纹理 支持 ， 它 的 点 击 效 果 是 放大 和 缩小 。 
实际 上 ，ccui .Button 在 按 下 的 时 候 就 可 以 有 缩放 的 效果 ， 你 可 以 通过 表 10-17 中 的 相关 API 来 


= 六 四 
享受 这 一 效果 。 
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表 10-17 ccui .Button 缩 放 效 果 相 关 函 数 


回 值 类 型 参数 类 型 函 数 说 明 

Number 无 getZoomScale () 获取 一 个 缩放 比例 

无 Number setZoomScale (scale) 设置 一 个 缩放 比例 

无 Boolean setPressedActionEnabled(enabled) 设置 启用 按钮 被 按 下 时 的 缩放 操作 


10.4 ”ccui .checkBox 复 选 框 


复 选 框 ( ccui .CheckBox ) 0 中 这 两 个 状态 ， 可 以 为 其 添加 事件 监听 器 来 响应 
事件 从 而 处 理 对 应 的 逻辑 。 在 游戏 中 ， 复 选 框 一 般 用 在 一 些 设置 中 , 例如 是 否 开启 特效 、 是 否 接 
受 组 队 邀 请 、 是 否 接受 系统 推送 等 。 2 选中 和 未 选中 的 状态 如 图 10-1 和 图 10-2 所 示 。 


Selected Unselected 


图 10-1 CheckBox 选 中 状态 图 10-2 ”CheckBox 未 选中 状态 


创建 一 个 ccui .checkBox 对 象 的 代码 如 下 : 


1 // 加 载 [CheckBox] 

2 loadCheckBox : function(){ 

3 Var node = new ccui.CheckBox(); 

4 this.addChild (node); 

号 node.loadTextures ("res/unit10 ui/check box normal.png", 
6 "res/unit10 ui/check box normal press.png", 

3 "res/unit10 ui/check box active.png", 

8 "res/unit10 ui/check box normal disable.png", 


9 "res/unit10 ui/check box active disable.png"); 

10 node.setTouchEnabled (true); 

J node.setPosition(cc.winSize.width/ 2, cc.winSize.height / 2); 
12 node.addEventListener (this.onCheckBoxSelectedEvent, this); 

二 3 小 


第 12 行 为 复 选 框 添加 了 一 个 事件 监听 器 ， 其 代码 如 下 : 


1 onCheckBoxSelectedEvent: function (sender, type) { 
2 switch (type) { 
3 Case ccui.CheckBox.EVENT UNSELECTED: 
4 cc.1og(" 复 选 框 没 选中 ") ; 
二 break; 

6 Case ccui.CheckBox.EVENT SELECTED: 

7 cc.1og(" 复 选 框 选中 ") ; 

8 break; 
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9 default : 
10 break; 
11 } 

12. 3 


可 以 看 到 ，ccui .checkBox 可 以 响应 两 种 类 型 的 事件 ， 分 别 是 未 选中 ccui .CheckBox. 


VENT_UNSELECTED 以 及 选中 ccui .CheckBox.EVENT_SELECTED。 


另外 ，ccui .CheckBox 的 相关 纹理 读 取 也 可 以 放 在 构造 函数 中 ，ccui .checkBox 的 构造 函 
数 以 及 参数 说 明 如 表 10-18 所 示 。 


I 


I | 


国 


表 10-18 ”ccui .checkBox 构 造 函 数 以 及 参数 说 明 


构造 函数 ccui .checkBox (backGround，backGroundqSelected，cross，backGroundqDisabled， 
frontCrossDisabled, texType) 
参数 参数 说 明 
backGround 未 选中 常态 纹理 
backGroundSelected 背景 选中 状态 纹理 
参数 列表 cross 色 选 选中 状态 纹理 
backGroundDi sabled 背景 禁用 状态 纹理 
frontCrossDisabled 勾 选 禁用 状态 纹理 
texType 纹理 类 型 


此 外 ，ccui .checkBox 常 用 函数 如 表 10-19 所 示 。 


表 10-19 ”cecui .checkBox 常 用 函数 


返回 值 类 型 ” 参数 类 型 函 数 说 明 
无 String loadTextures (backGroung, 加 载 相关 状态 纹理 以 及 纹理 类 型 
String backGroundSelected, cross, 
String backGroundDisabled, 
String y 
String frontCrossDisabled, texType) 
umber 
无 String loadTextureBackGround( 加 载 未 选中 常态 纹理 以 及 纹理 类 型 
umber backGround, texType) 
无 String loadTextureBackGroundSelected( 加 载 背 景 选中 状态 纹理 以 及 纹理 类 型 
umber backGroundSelected, texType) 
无 String loadTextureFrontCross( 加 载 选 中 状态 纹理 以 及 纹理 类 型 
umber cross, texType) 
无 String loadTextureBackGroundDisabled( 加 载 背景 禁用 状态 纹理 以 及 纹理 类 型 
umber backGroundDisabled, texType) 加 
无 String loadTextureFrontCrossDisabled( 加 载 匀 选 禁用 状态 纹理 以 及 纹理 类 型 
umber frontCrossDisabled, texType) 
Boolean 无 isSelected() 获取 是 否 选中 的 结果 
无 Boolean setSelected (selected) 设置 是 否 选 中 
无 Function adqqEventListener (Selector，target) 添加 事件 监听 器 


Object 
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10.5 ccui .Slidezr 滑 块 


滑 块 (ccui .sliger ) 一 般 用 来 控制 音量 或 者 是 调整 屏幕 暗 度 等 ， 例 如 iOS 系 统 中 的 控制 中 
心 ， 如 图 10-3 所 示 。 


<4 Pp Pb 


4 


例 AiiDrop 共享 
1 @ 国 


图 10-3”iOS 系 统 中 的 控制 中 心 


滑 块 控件 由 滑 块 控制 点 、 滑 块 进度 条 和 滑 块 背景 组 成 ， 这 意味 着 你 需要 提供 至 少 3 张 图 片 来 
创建 一 个 Slider 滑 块 控件 。 创 建 Slider 滑 块 控 件 的 代码 如 下 : 


1 // 加 载 [ 滑 块 ] 

2 loadSlider : function(){ 

3 var slider = new ccui.Slider(); 

4 this.addChild(slider); 

Sy slider.loadBarTexture("res/unit10 ui/slider bar.png"); 
6 slider.loadSslidBallTextures( 

中 "res/unit10 ui/slider ball normal.png", 

8 "res/unit10 ui/slider ball pressed.png", 


9 "res/unit10 ui/slider ball disabled.png"); 

10 slider.loadProgressBarTexture("res/unit10 ui/slider progress.png"); 
小 slider.setPosition(cc.winSsize.width/2, cc.winSize.height/2); 

12 slider.addEventListener (this.onSliderEvent, this); 

13 } 


其 中 ， 第 5 行 代码 用 于 加 载 滑 块 背景 纹理 ， 第 6 行 到 第 9 行 代码 加 载 了 3 张 纹理 ， 这 3 张 纹理 分 别 表 
示 滑 块 控制 点 的 常态 纹理 、 按 下 纹理 和 禁用 纹理 。 第 10 行 代码 加 载 了 滑 块 进度 条 ， 而 第 12 行 代码 
则 给 请 块 添加 一 个 事件 监听 器 ， 在 此 事件 监听 器 的 回调 函数 中 ， 你 可 以 监听 到 滑 块 的 百分比 值 ， 
代码 如 下 : 

1 onSliderEvent: function (sender, type) { 


2 switch (type) { 
3 case ccui.Slider.EVENT PERCENT CHANGED: 
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4 Var percent = sender.getPercent () ; 

5 CC.10og ("百分比 : " + percent.toFixed(0)); // 取 整 输出 
6 break; 

7 default : 

8 break; 

9 } 

二 0 和 


运行 上 述 代 码 , 将 滑 块 的 控制 点 拖 到 如 图 10-4 所 示 的 位 置 , 此 时 在 Chrome 控 制 台 的 输出 如 图 
10-5 所 示 。 


民 加 Elements Console Sources » :XX 
© 可 <topframe> v (Preserve log 
百分比 : ”64 CCDebugger.is:331 
百分比 : 65 CCDebugger.js:331 
百分比 : 66 CCDebugger.js:331 
全 百分比 : 67 CCDebugger. js:331 
百分比 : 68 CCDebugger.ijs:331 
> 
图 10-4 Slider 滑 块 图 10-5 Chrome 控制 台 输 出 


10.6 ccui .ImageView 图 片 视 图 


图 片 视图 (ccui . ImageView ) 实际 上 就 是 一 张 单纯 的 图 片 ， 一 般 作为 UI 面板 的 背景 图 等 ， 
例如 图 10-6 中 的 木板 背景 。 


解锁 需 先 完成 极地 冒险 第 24 关 , 是否 立 即 解锁 ? 


一 ¥6.00 


ry 


HH 


图 10-6 天 天 向 上 解锁 对 话 框 
ccui .ImageView 的 使 用 是 所 有 UI 控件 中 最 简单 的 ， 其 创建 代码 如 下 : 


1 // 加 载 [ImageView] 
2 loadImageView : function(){ 
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3 var node = new ccui.ImageView("res/node 256.png"); 

4 this.addChild (node); 

5 node.setPosition(cc.winSize.width/2, cc.winSize.height / 2 ); 
6 


} 
此 外 ，ccui .ImageView 常 用 的 函数 如 表 10-20 所 示 。 


表 10-20 ccui .ImageView 常 用 函数 


返回 值 类 型 参数 类 型 函 数 说 明 
无 String loadTexture (fileName, texType) 加 载 纹理 图 片 以 及 纹理 图 片 类 型 
Number 
无 ce.Rect setTextureRect (rect) 设置 纹理 区 域 
无 Boolean setScale9Enabled (enable) 设置 为 九宫 格 
Boolean 无 isScale9Enabled () 获取 是 否 为 九宫 格 的 结果 


其 中 ，texType 与 ccui .Button 构 造 函 数 的 参数 一 致 ， 为 纹理 图 片 类 型 ， 具 体 见 表 10-7。 


10.7 ccui .LoadingBar 加 载 条 


加 载 条 (ccui .LoadingBar ) 也 称 为 进度 条 ， 一般 用 来 显示 资源 加 载 进 度 、 网 络 资源 下 载 
进度 或 者 怪物 的 血 条 等 。 


创建 一 个 ccui .LoaaingBar， 仅 需要 一 张 图 片 即 可 ， 其 代码 如 下 : 
1 // 加 载 [ 进 度 条 ] 


2 loadLoadingBar : function(){ 

和 Var node = new ccui.LoadingBar (); 

4 this.addChild (node); 

5 node.loadTexture("res/unit10 ui/slider progress.png"); 
6 node.setDirection(ccui.LoadingBar.TYPE_LEFT); // 设置 方向 
8 
9 
遍 


node.setPercent (10); // 设置 百分比 
node.setPosition(cc.winSize.width/2, cc.winSize.height / 2 ); 


} 
第 6 行 代 人 码 设 置 LoadingBar 的 方 问 为 向 左 ， 大 其 值 还 还 可 以 是 是 Ccui.LoadingBar.TYPE_ 
RIGHT， 表 示 向 右 。 男 外 ,第 7 行 代码 用 于 设置 LoadingBar 的 百分比 。 实 际 上 , 你 可 以 通过 一 个 调 
度 需 来 动态 设置 LoadingBar 的 百分比 ， 从 而 达到 进度 条 加 载 的 效果 ， 如 图 10-7 所 示 。 


图 10-7 LoadingBar 加 载 条 


此 外 , ccui .LoadqingBazr 的 常用 函数 与 ccui . ImagevView 的 常用 函数 是 一 样 的 , 见 表 10-20。 
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10.8 ccui .TextField 编辑 框 


编辑 让 


匡 ( ccui .TextField ) 一 般 用 来 收集 一 些 用 户 输 入 的 信息 , 例如 玩家 注册 一 个 账号 时 ， 


编辑 框 可 以 获取 到 玩家 输入 的 账号 。 男 外 ,编辑 框 也 可 以 设 为 密码 模式 ， 在 密码 模式 下 ， 玩 家 输 
入 的 字符 将 由 设 定 字 符 显 示 ( 例如 * 号 )， 而 非 明 文 。 
创建 一 个 编辑 框 的 代码 如 下 : 


ActioniF 上 textField 运 行 一 个 向 上 移动 的 moveTo 动 作 , 然后 在 case ccui .TextField .EV] 
ETACH_WITH_IME 里 让 textField 输 入 框 moveTo 回 来 ， 这 便 解 决 了 在 手机 上 键盘 可 能 挡住 
textField 控 件 的 问题 。 


D 


// 


} 
// 


‘O02OURODODP 


BR Ro FS i 
NA OR 


DDODD 
ON UL 心 ww 


27 } 


加 载 [ 编 辑 框 ] 


loadTextFiled : function()t{ 


var node = new ccui.TextField ("请 输入 账号 :"，"Arial",， 30); 
this.addChild (node); 

node.setPosition(cc.winSize.width/2, cc.winSize.height / 2 ); 
node.addEventListener (this.onTextFieldEvent, this); // 添加 事件 监听 器 


事件 [编辑 框 输入 事件 ] 


onTextFieldEvent: function(textField, type){ 


switch (type) { 

case ccui.TextField.EVENT ATTACH WITH IME: 
cc.1og("[ 挂 载 到 ] 输入 法 编辑 器 " ) ; 
break; 

case ccui.TextField.EVENT DETACH WITH_IME : 
cc.1log ("输入 法 编辑 器 [失去 挂 载 ] ")，; 
break; 

Case ccui.TextField.EVENT INSERT TEXT: 
cc.1log(" 输 入 法 编辑 器 [输入 ] ") ; 
break; 

case ccui.TextField.EVENT DELETE BACKWARD: 
cc.1og(" 输 入 法 编辑 器 [删除 ] "); 


break; 
default: 
break; 
} 
cc.1log ("编辑 框 中 内 容 : "，textField.getString()); 


在 实际 开发 中 ， 你 可 以 在 case ccui.TextField.EVENT_ATTACH_WITH_IME 中 写 一 个 


过 
对 
乙 
器 


前 面 说 到 ，ccui .TextField 还 有 个 密码 模式 ,密码 模式 的 开启 以 及 密码 显示 的 样式 设 定 实 


现代 码 如 下 : 
1 node.setPasswordEnabled(true); // 启用 [密码 模式 ] 
2 node.setPasswordStyleText ("*"); // 设置 [密码 样式 ] 


此 外 ， 


ccui .TextField 常 用 也 数 如 表 10-21 所 示 。 
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表 10-21 ccui .TextField 常 用 函数 


返回 值 类 型 参数 类 型 函 数 说 明 
无 ccui .TextField onTextFieldAttachWithIME(sender) ， 挂 载 输入 法 时 的 回调 函数 
无 ccui .TextField onTextFielqDetachwithIME (senqer) 取消 挂 载 输入 法 时 的 回调 函数 
无 ccui.TextField onTextFieldIinsertText 插入 文本 时 的 回调 函数 ， 其 参数 如 下 。 
Strin (sender, text, len) RE 
口 sender: 文本 编辑 框 实例 。 
Number 
口 text: 将 要 插入 的 字符 串 。 
口 len: 将 要 插入 的 字符 串 长 度 
无 ccui.TextField onTextFieldDeleteBackward 删除 文本 时 的 回调 函数 ， 其 参数 如 下 。 
Strin (sender, delText, len) 
的 D sender: 文本 编辑 框 实例 。 
Number 
口 aelText: 将 要 删除 的 字符 串 。 
口 len: 将 要 插 和 人 的 字符 串 长 度 
无 String insertText (text, len) 重信 文本 
Number 
无 无 deleteBackward () 可 退 删 除 
无 无 openIME () 打开 输入 法 编辑 器 
无 无 closeIME () 关闭 输入 法 编辑 器 
Boolean setMaxLengthEnabled (isEnable) 启用 最 大 长 度 限 制 
Boolean 无 isMaxLengthEnabled() 获取 是 否 启 用 了 最 大 长 度 限制 的 结果 
无 umber setMaxLength (length) 设置 最 大 长 度 
Number 无 getMaxLength () 获取 最 大 长 度 
无 umber getCharCount () 获取 总 共 输 入 的 字符 数 
无 Boolean setPasswordEnabled (isEnable) 启用 密码 输入 模式 
Boolean 无 isPasswordEnabled () 获取 是 否 启用 密码 输入 模式 的 结果 
无 String setPasswordStyleText (styleText) 设置 密码 模式 下 的 文本 样式 
无 String setPasswordText (text) 设置 密码 
无 Boolean setAttachWithIME (isAttach) 设置 是 否 挂 载 输 入 法 编辑 器 
汛 Boolean getAttachWithIME () 获取 是 否 挂 载 输 入 法 编辑 器 的 结 
无 Boolean SetDetachWithIME (isDetach) 设置 是 否 取消 挂 载 输入 法 编辑 器 
Boolean ”无 getDetachWithIME () 获取 是 否 取消 挂 载 输入 法 编辑 器 的 
结果 
无 Boolean setInsertText (insert) 设置 是 否 允 许 文 本 输入 
Boolean 无 getInsertText () 获取 是 否 允 许 文 本 输入 的 结果 
大 Boolean setDeleteBackward 设置 是 否 人 允许 回 删 
(isDeleteBackward) 
Boolean 无 getDeleteBackward() 获取 是 否 允 许 回 删 的 结 
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10.9 ccui .Layout 布局 


布局 ( ccui .Layout ) 是 一 个 包含 控件 的 容器 ， 容 右 中 的 子 节点 根据 布局 类 型 进行 摆 放 。 
布局 类 型 有 绝对 布局 、 相 对 布局 、 水 平 布局 和 垂直 布局 4 种 ， 默 认为 绝对 布局 。 

ccui.Layout 和 cc.Layez 类 似 , 是 一 个 默认 看 不 见 的 节点 。 不 过 , 你 可 以 给 ccui .Layout 
设置 颜色 和 内 容 大 小 ， 那 么 整个 ccui .Layout 就 很 直观 地 显示 出 来 ， 这 是 一 个 非常 好 的 辅助 功 
能 。 另 外 ， 除 了 设置 颜色 之 外 ，ccui .Layout 还 允许 设置 背景 图 像 。 通 过 如 下 代码 可 以 创建 出 


一 个 简单 的 ccui .Layout: 
1 // 加 载 [默认 布局 ] 
2 loadLayout : function() { 
3 var layout = new ccui.Layout(); 
4 this.addChild(layout); 
5 layout.setContentSize(852, 480); 
6 layout.x = (cc.winSize.width - layout.width ) / 2; 
2 layout.y = (cc.winSize.height - layout.height) / 2; 
8 layout.setBackGroundColor(cc.color(128, 128, 128)); 
9 // 设置 背景 颜色 类 型 
10 layout.setBackGroundColorType (ccui.Layout .BG COLOR SOLID); 
了 


ccui .Dayout 的 默认 锚 点 为 cc.p(0，0)。 所 以 ， 第 6 行 和 第 7 行 代 码 是 将 layout 定 位 在 屏 
幕 的 正中 心 。 第 8 行 代码 设置 了 1layout 的 背景 颜色 ， 第 9 行 代 码 设置 了 背景 颜色 的 类 型 。 
ccui .Layout 中 背景 颜色 、 背 景 图 片 相关 的 API 分 别 如 表 10-22 和 表 10-23 所 示 。 


表 10-22 ccui .Layout 中 背景 颜色 相关 的 API 


参数 或 返回 类 型 函 数 说 明 
Number getBackGroundColorType() 获取 背景 颜色 类 型 
Number setBackGroundColorType (type) 设置 背景 颜色 类 型 
Se CoOLor getBackGroundColor () 获取 背景 颜色 
(ole OloNN ole setBackGroundColor (color, endColor) 设置 背景 颜色 
CC.Color getBackGroundStartColor () 获取 新 变 背 景 颜 色 开 始 的 值 
COLor getBackGroundEndColor () 获取 渐变 背景 颜色 结束 的 值 
Number getBackGroundColorOpacity () 获取 背景 颜色 不 透明 度 
Number setBackGroundColorOpacity (opacity) 设置 背景 颜色 不 透明 度 
dep getBackGroundColorVector() 获取 背景 颜色 可 量 
tou setBackGroundColorVector (vector) 设置 背景 颜色 向 量 


其 中 背景 颜色 类 型 可 取 的 值 如 下 。 


D ccui .Layout .BG_COLOR_NONE :， 表示 无 颜色 类 型 。 
D ccui .Layout .BG_COLOR_SoLID: 表示 固定 颜色 类 型 。 
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口 ccui .Layout .BG COLOR GRADIENT: 表示 渐变 颜色 类 型 。 


表 10-23 ”ccui .Dayout 与 背景 图 片 相 关 的 API 


返回 值 类 型 返回 类 型 函 数 说 明 

无 String setBackGroundImage (fileName, texType) 设置 背景 图 片 
Number 

无 无 removeBackGroundImage() 移 除 背 景 图 片 
TO 无 getBackGroundImageColor () 获取 背景 图 片 颜 色 
无 Ce COLOF setBackGroundImageColor (color) 设置 背景 图 片 颜 色 
Number 无 getBackGroundIimageOpacity () 获取 背景 图 片 不 透明 度 
无 Number setBackGroundImageOpacity (opacity) 设置 背景 图 片 不 透明 度 
GaeTZze 无 getBackGroundImageTextureSize() 获取 背景 图 片 纹理 大 小 
Boolean 无 isBackGroundImageScale9FEnabled() 背景 图 片 是 否 启 用 九宫 格 
无 Boolean setBackGroundImageScale9Enabled(enable) 开启 /关闭 背景 图 片 九宫 格 模 式 


其 中 ,背景 图 片 的 纹理 类 型 ( texType ) 可 选 值 如 下 。 


口 ccui .Widget .LOCAL TEXTURE: 表示 单 张 纹 理 图 片 类 型 。 
D ccui.Widget .PLIST TEXTURE: 表示 精灵 表单 图 集 类 型 。 


当 创 建 好 一 个 ccui .Layout 之 后 ， 便 可 以 往 此 布局 中 添加 子 控件 ， 然 后 进行 布局 。 
ccui .LayoutParameter 是 一 个 布局 参数 类 ， 用 来 设置 布局 的 排列 方式 ， 例 如 左 对 齐 、 右 对 齐 
或 者 水 平 居 中 等 。ccui. LayoutParameter 有 两 个 子 类 一 一 线性 布局 类 ccui .LinearLayout- 
Parameter 和 相对 布局 类 ccui .RelativeLayoutParameter。 我 将 layout 的 布局 设置 为 线性 
布局 ， 然 后 给 layout 添 加 了 3 个 按钮 ， 代 码 如 下 : 


1 // 加 载 [ 垂 直 布 局 ] 

2 loadLayoutLinearVertical : function(){ 

3 2 ey 

4 layout.setLayoutType (ccui.Layout .LINEAR VERTICAL); 

号 var buttonTexture = "res/unit10 ui/btn start normal .png" ; 
6 // 按 鱼 1 

7 Var buttonl= new ccui.Button(); 

8 layout .addChild (buttonl); 

9 buttonl.setTouchEnabled (true); 


0 buttonl.loadTextures (buttonTexture, buttonTexture, "™"); 
1 // 布局 参数 
2 var lpl = new ccui.LinearLayoutParameter (); 
站 寺 buttonl.setLayoutParameter (1p1) 
14 lpl.setGravity (ccui.LinearLayoutParameter .CENTER_HORIZONTRAL ) ; 
5 lpl.setMargin (new ccui.Margin(0, 10, 0, 10)); 
6 // 按钮 2 ...... 
7 // 按钮 3 ...... 
8 小 


第 4 行 代码 设置 了 lavyout 的 布局 类 型 ， 其 可 选 值 如 下 。 


Ri 
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口 ccui .Layout .ABSOLUTE : 
口 ccui .Layout .RELATIVE : 


第 12 行 创建 了 线性 布局 参数 。 第 13 行 


layout 设 置 。 


绝对 布局 
相对 布局 


口 ccui .Dayout .LINEAR VERTICAL : 


类 型 。 


类 型 。 


线性 垂直 布局 


口 ccui .Dayout .LINEAR HORIZONTAL : 


线 | 


类 型 。 


生 水 平 布 局 类 型 。 
给 按钮 设置 了 布局 参数 ， 注 意 这 


第 14 行 给 布局 参数 对 象 设置 了 对 齐 方式 ， 其 可 选 值 如 下 。 


口 ccui .LinearLayoutParameter . 
口 ccui .LinearLayoutParameter . 
口 ccui .LinearLayoutParameteL 
口 ccui .LinearLayoutParameter . 
口 ccui .LinearLayoutParameter . 
口 ccui .LinearLayoutParameter . 


口 ccui .LinearLayoutParameter . 


何 一 个 按钮 设置 坐标 ， 但 是 


是 运行 上 面 的 代码 ， 可 以 看 到 效果 


NONE: 无 对 齐 方式 。 
LEFT: 左 对 齐 。 
.TOP: 上 对 齐 。 

RIGHT: 右 对 齐 。 
BOTTOM: 下 对 齐 。 


CENTER VERTICAL: 


是 给 按钮 而 不 是 给 


垂直 居中 对 齐 。 


CENTER_HORIZONTAL: 水 平 居 中 对 齐 。 


第 15 行 代码 给 布局 参数 对 象 设置 了 外 边 距 , 外 边 距 的 4 个 参数 分 别 表 示 的 是 左边 距 、 上 边 距 、 
右边 距 、 下 边 距 。 


另外 , 还 有 两 个 按钮 的 开发 与 按钮 1 类 似 ( 见 随 书 源码 )。 这 里 需要 说 明 的 是 ,我 并 没有 给 任 
如 图 10-8 所 示 ， 


这 就 是 布局 的 作用 。 


图 10-8 


垂直 


居中 布局 


最 后 ，ccui .Layout 剩 下 的 相关 API 如 表 10-24 所 示 。 
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表 10-24 ccui .Layout 其 他 API 


返回 值 类 型 参数 类 型 函 数 说 明 

Number 无 getLayoutType() 获取 布局 类 型 

无 Number setLayoutType (type) 设置 布局 类 型 

无 无 requestDoLayout () 请 求 刷 新 布局 

无 无 forceDoLayout () 强制 刷新 布局 

Boolean 无 isClippingEnabled () 获取 是 否 开启 了 裁剪 的 结果 

无 Boolean setClippingEnabled (enable) a 开启 裁剪 

Boolean 无 isLoopFocus () 获取 是 否 启 用 循环 焦点 的 结果 

无 Boolean setLoopFocus (loop) 设置 是 否 启 用 循环 焦点 

Boolean 无 isPassFocusToChild() 获取 是 否 人 允许 传递 焦点 到 子 节点 上 的 结果 

无 Boolean setPassFocusToChild (pass) 设置 是 否 允 许 传递 焦点 到 子 节点 上 

umber 无 getClippingType () 获取 裁剪 类 型 

无 Number setClippingType (type) 设置 裁剪 类 型 

无 Number findNextFocusedWidget ( 获取 指定 方向 中 的 下 一 个 能 够 具有 焦点 的 控件 
ccui .Widget direction, current) 


ccui .Widget 


findNextFocusedWidget (direction, current) ) 中 的 curr nt 表示 当前 焦点 控件 ， 而 
direction 表 示 方 向 ， 其 可 选 值 如 下 。 


口 ccui .Widget .LEFT: 向 左 。 
口 ccui .Widget .RIGHT: 向 右 。 
口 ccui .widget.UP: 向 上 。 

口 ccui .Widget.DOWN: 癌 下 。 


另外 ，ccui .Layout 是 可 以 裁剪 的 。 调 用 setclippingEnabledq(true) 函数 之 后 ， 再 结合 
setContentSize (size) 即 可 。 下 面 我 给 前 面 的 layout 开 启 了 裁剪 : 


1 // 加 载 [ 垂 直 布 局 ] 

2 loadLayoutLinearVertical : function(){ 
3 0 

4 layout.setClippingEnabled (true); 

5 layout.setContentSize(430, 200); 

6 We 

用 


运行 代码 ， 效 果 如 图 10-9 所 示 。 
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10 


展 玫 


图 10-9 ”ccui .Layout 开 启 裁剪 


.10 cceui .ScrollView 滚动 视图 


滚动 视图 ( ccui .ScrollView ) 继承 自 ccui .Layout， 也 是 一 个 布局 类 ， 它 可 以 让 放置 在 


其 内 部 的 UI 控 件 滚动 显示 。 例 如 ,《 保 卫 葛 卜 2》 中 关卡 选择 场景 中 有 十 几 张 背景 图 片 , 这 些 


F 会 超出 包 于 区域， 此 时 便 可 以 使 用 ccui .scrollview 来 布局 ， 使 其 滚动 显示 。 
创建 一 个 ccui .ScrollView 的 代码 如 下 : 


1 // 加 载 [滚动 视图 ] 

2 loadScrollView : function(){ 

3 Var scrollView = new ccui.ScrollView(); 

4 this.addChild(scrollView); 

5 scrollView.setContentSize(cc.size(512, 400)); 

6 scrollView.x = (cc.winSize.width - scrollView.width ) / 2; 
7 scrollView.y = (cc.winSize.height - scrollView.height ) / 2; 
8 scrollView.setTouchEnabled (true); 

9 

1 


scrollView.setDirection(ccui.ScrollView.DIR HORIZONTAL); 


0 


} 
第 9 行 代码 设置 了 深 动 视图 的 滚动 方向 ， 其 相关 API 如 表 10-25 所 示 。 


表 10-25 ”ccui .ScrollView 中 方向 相关 API 
参数 或 返回 类 型 函 数 说 明 


图 片 


Number getDirection() 获取 方 


I 


Number setDirection(dir) 设置 方 


其 中 ,方向 可 取 值 如 下 。 


EE 
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口 ccui .ScrollView.DIR_NONE: 无 方向 。 

口 ccui .ScrollView.DIR_VERTICAL: 坚 直方 向 。 
口 ccui .ScrollView.DIR_HORIZONTRAL : 水 平方 向 。 
口 ccui .ScrollView.DIR_BOTH: 水 平和 坚 直 方向 。 


深 动 视图 在 滚动 的 时 候 ， 可 以 添加 一 些 效果 ， 例 如 惯 怕 


、 弹 力 回 弹 ，API 如 表 10-26 所 示 。 


PT 


表 10-26 ”ccui .scrollview 中 惯性 、 弹 力 效果 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 

Boolean 无 isInertiaScrollEnabled() 获取 是 否 开启 滚动 惯性 效果 的 结果 
无 Boolean setInertiaScrollEnabled (enabled) 设置 是 否 开启 滚动 惯性 效果 
Boolean 无 isBounceEnabled () 获取 是 否 开启 弹力 效果 的 结果 

无 Boolean setBounceEnabled (enabled) 设置 是 否 开 启 弹 力 效 果 


接 下 来 ,我 给 之 前 的 深 动 视图 添加 一 张 图 片 ， 代 码 如 下 : 


1 // 加 载 [ 滚 动 视图 ] 

2 loadScrollView : function(){ 

3 var scrollView = new ccui.ScrollView(); 

4 7 

5 Var imageView = new ccui.ImageView("res/unit07 design/background.png"); 

6 scrollView.addChild (imageView); 

7 scrollView.setInnerContainerSize(cc.size(imageView.width, imageView.height)); 
8 imageView.x = imageView.width / 2; 

9 imageView.y = imageView.height / 2; 

10 } 


第 7 行 代码 设置 了 滚动 视图 内 部 容器 的 大 小 ， 这 和 setcontentsize(size) 是 有 区 别 的 。 
setContentSize 设 置 的 是 深 动 视图 的 大 小 , 而 setInnercontainerSize 设 置 的 是 内 部 容 需 的 
大 小 。 另 外 需要 注意 的 是 , 内 部 容器 的 大 小 必须 大 于 或 等 于 滚动 视图 的 大 小 。 与 容器 以 及 大 小 相 
关 API 如 表 10-27 所 示 。 


表 10-27 ccui .scrollView 中 容器 以 及 大 小 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 

ccui .Layout 无 getInnerContainer () 获取 滚动 视图 的 内 部 布局 容器 
cc.Size 无 getInnerContainerSize() 获取 内 部 容器 的 大 小 

无 cc.Size setInnerContainerSize(size) 设置 内 部 容器 的 大 小 


在 实际 开发 中 ， 很 少 去 监听 滚动 视图 的 滚动 事件 ， 但 是 这 些 事件 接口 都 是 存在 的 ， 如 表 10-28 
所 示 。 值得 注意 的 是 ， onTouchBegan 、onTouchMoved 、onTouchEndeqd 以 及 onTouchcancelled 


函数 为 ccui .ScrollView 内 部 实现 用 ， 不 建议 重 写 它们 。 


hl 
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表 10-28 ”ccui .scrollview 中 事件 相关 接口 


返回 值 类 型 参数 类 型 函 数 说 明 

Boolean cc.Touch onTouchBegan (touch, event) 触摸 开始 时 的 回调 函数 
cc.Event 

无 cc.Touch onTouchMoved (touch, event) 触摸 移动 时 的 回调 函数 
cc.Event 

无 cc.Touch onTouchEnded (touch, event) 触摸 结束 时 的 回调 函数 
cc.Event 

无 GCTOueh onTouchCancelled (touch, event) 触摸 取消 时 的 回调 函数 
cc.Event 

无 Function addEventListener (selector, target) 添加 事件 监听 器 
Object 


有 的 时 候 ， 你 可 能 需要 滚动 视图 滚动 到 某 个 位 置 ， 而 ccui .ccui .ScrollView 提 供 了 如 表 
10-29 所 示 的 相关 API。 


表 10-29 ccui .scrollview 中 滚动 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 

天 umber scrollToBottom(time, attenuated) 滚动 到 滚动 视图 的 底部 
Boolean 

无 umber scrollToTop (time, attenuated) 滚动 到 滚动 视图 的 顶部 
Boolean 

无 umber scrollToLeft (time, attenuated) 滚动 到 视图 的 左 端 
Boolean 

无 umber scrollToRight (time, attenuated) 滚动 到 视图 的 右 端 
Boolean 

无 umber scrollToTopLeft (time, attenuated) 滚动 到 视图 的 左上 角 
Boolean 

无 umber scrollToTopRight (time, attenuated) 滚动 到 视图 的 右上 角 
Boolean 

i umber scrollToBottomLeft (time, attenuated) 滚动 到 视图 的 左下 角 
Boolean 

无 umber scrollToBottomRight (time, attenuated) 滚动 到 视图 的 右 下 角 
Boolean 

无 umber scrollToPercentVertical 按 百 分 比 竖 直 滚 动 
umber (percent, time, attenuated) 
Boolean 

无 umber scrollToPercentHorizontal 按 百分比 水 平 滚动 
umber (percent, time, attenuated) 
Boolean 

元 umber scrollToPercentBothDirection 竖 直 方向 和 水 平方 向 分 别 按 
umber (percent, time, attenuated) 一 定 的 百分比 滚动 
Boolean 

这 些 接口 都 至 少 接受 两 个 参数 : time 和 attenuated。 其 中 ，time 表 示 持 续 时 间 ， 


attenuated 表 示 滚 动 速度 是 否 误 减 ， 也 就 是 说 ， 这 些 滚 动 会 持续 一 段 指定 的 时 间 。 当 然 ， 
ccui .ScrollView 还 提供 了 瞬时 就 能 完成 的 “滚动 ”， 这 里 将 这 一 动作 称 为 跳跃 ， 相 关 API 如 表 
10-30 所 示 。 
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表 10-30 ccui .scrollView 中 跳跃 相关 API 
返回 值 类 型 ”人 参数 类 型 函 数 说 明 
无 无 jumpToBottom() 跳 到 视图 底 端 
无 无 jumpToTop () 跳 到 视图 顶端 
无 无 jumpToLeft () 跳 到 视图 左边 
无 无 jumpToRight () 跳 到 视图 右边 
着 无 jumpToTopLeft () 跳 到 视图 左上 角 
无 无 jumpToTopRight () 跳 到 视图 右上 角 
无 无 jumpToBottomLeft () 跳 到 视图 左下 角 
无 无 jumpToBottomRight () 跳 到 视图 右 下 角 
无 Number jumpToPercentVertical (percent) 竖 直 方向 跳 到 指定 百分比 位 置 
无 Number jumpToPercentHorizontal (percent) 水 平方 向 跳 到 指定 百分比 位 置 
无 Number jumpToPercentBothDirection (percent) 怪 直 和 水 平方 向 跳 到 指定 百分比 位 置 


10.11 ccui .PageView 分 页 视 医 


分 页 视图 ( ccui .PageView ) 也 是 直接 继承 自 ccui .Layou 


t ， 与 深 动 视图 不 一 样 的 是 ， 分 


页 视图 将 其 内 部 的 UI 控件 进行 分 页 布局 ， 每 次 只 能 显示 一 页 ， 但 是 可 以 在 多 页 之 间 进 行 切换 。 


创建 一 个 ccui .PageView 的 代码 如 下 : 


1 // 加 载 [PageView] 
2 loadPageView : function(){ 
3 var pageView = new ccui.PageView(); 
4 this.addChild (pageView); 
5 pageView.setTouchEnabled (true); 
6 pageView.setContentSize(cc.winSsize),; 
时 pageView.x = (cc.winSize.width - pageView.width) / 2; 
8 pageView.y = (cc.winSize.height - pageView.height) / 2; 
97 sr} 
创建 完 一 个 分 页 后 ， 可 以 通过 如 表 10-31 所 示 的 API 给 分 页 视图 添加 、 删 除 和 获取 页 面 。 
表 10-31 ccui .PagevView 中 添加 、 删 除 、 查 询 页 的 相关 API 
返回 值 类 型 参数 类 型 函 数 说 明 
无 ccui.Layout addPage (page) 往 分 页 视图 的 最 后 插入 一 页 
无 ccui .Widget addwidgetToPage (widget, 把 一 个 UI 控件 添加 到 分 页 视图 中 
NNDes Bodleat pagelIdx, forceCreate) 
无 ccui .LayoutNumber insertPage (page, index) 在 指定 位 置 插入 一 页 
无 ccui .Layout removePage (page) 移 除 一 页 
无 Number removePageAt Index (index) 移 除 指定 位 置 的 页 
无 无 removeAllPages () 移 除 所 有 页 
Number 无 getCurPageIndex () 获取 当前 显示 页 的 索引 号 
Array 无 getPages () 获取 所 有 页 的 列表 
ccui .Layout Number getPage (index) 获取 指定 的 页 
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( 续 ) 
返回 值 类 型 参数 类 型 函 数 说 ” 明 
无 Number scrollToPage (index) 滚动 到 一 个 指定 的 页 


分 页 视图 上 默认 需要 滑动 到 页 面 宽 度 大 小 一 半 的 时 候 才 会 切换 到 下 一 页 , 但 实际 上 , 你 可 以 设 


置 这 个 滑动 临界 值 ， 相 关 API 如 表 10-32 所 示 。 


表 10-32 ccui .PageView 中 滑动 临界 值 相关 的 API 


返回 值 类 型 ”参数 类 型 


函 


数 


说 明 


无 Number 
Number 无 
无 Boolean 
Boolean E 


setCustomScrollThreshold (threshold) 设置 自 定义 深 动 临界 值 


getCustomScrollThreshold() 


isUsingCustomScrollThreshold() 


获取 自 定义 深 动 临界 值 


setUsingCustomScrollThreshold (flag) 设置 是 否 使 用 自 定义 滚动 临界 值 


获取 是 否 使 用 自 定义 滚动 临界 值 的 结果 


现在 我 创建 3 张 图 片 ， 把 它们 添加 到 之 前 创建 的 分 页 视图 pageview 中 ， 代 码 如 下 : 


1 // 加 载 [PageView] 

2 loadPageView : function(){ 

3 var pageView = new ccui.PageView(); 
4 AR 

5 for (var i = 0; i < 3; ++i) 

6 var 

7 pageView.addPage (layout); 

8 

9 var 

10 layout.addChild(imageView); 
1 imageView.x = pageView.width / 2; 
水 党 

13 

14 

15 Switch (type) { 

16 

17 Var index = 

18 

19 break; 

20 default : 

21 break; 

22 } 

23 }, this); 

24 } 


第 6 行 代码 创建 了 一 个 ccui .Layout 布 局 对 象 。 注 意 


{ 


layout = new ccui.Layout(); 


imageView = new ccui.ImageView("res/unit07_ design/background.png"); 


case ccui.PageView.EVENT TURNING: 


cc.1og ("当前 第 " + index + " 


imageView.y = pageView.height / 2; 


pageView.addEventListener (function(sender, type)t{ 


pageView.getCurPageIndex() + 1; 


“Gy 


页 “二 


这 里 必须 要 先 给 ccui .PageView 添 加 


一 个 ccui .Layout 布 局 对 象 ， 这 是 因为 在 Native 上 ，ccui .PageView 只 接受 ccui .Layout 作 为 
参数 。 第 7 行 把 ccui .Layout 对 象 添加 到 pageview 分 页 视图 中 ， 第 10 行 代码 把 创建 的 


ccui .ImageView 对 象 添加 到 ccui .Layout 里 。 


第 14 行 到 第 23 行 代码 ， 给 pageView 添 加 了 事件 监听 右 。 当 分 页 视图 有 滑动 事件 时 ， 则 会 触 


三 天 
三 台 


EVENT_TURNING 寻 


发 ccui .PageView.] 


件 。 
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10.12 ccui .ListView 列表 视图 


列表 视图 (ccui .ListView ) 继承 自 ccui.Sscrollview， 所 以 它 同样 具有 滚动 特性 。 列 表 
视图 容 右 中 的 UI 控件 以 项 (item ) 为 单位 , 项 可 以 基于 某 个 模型 , 然后 通过 克隆 的 方式 高 效 利用 。 
显然 ， 像 游戏 包 右 这样 的 功能 用 列表 视图 实现 是 不 二 的 选择 。 

另外 需要 说 明 的 是 ，ccui .ListView 在 创建 元 素 的 时 候 ， 如 果 元 素 个 数 非常 多 ， 需 要 考虑 
在 移动 ListView 的 过 程 中 ,动态 调整 项 的 位 置 来 起 到 优化 作用 。 比 如 ， 一 个 列表 视图 需要 有 100 
个 项 , 但 它 一 共 可 以 显示 10 个 项 ， 此 时 可 以 多 创建 项 , 例如 12 个 或 者 15 个 , 然后 在 移动 过 程 中 去 
修改 第 12 个 项 或 者 第 15 个 项 的 位 置 以 及 其 他 属性 。 但 倘若 你 直接 创建 了 100 个 项 ， 那 么 将 会 非常 
消耗 内 存 并 且 影 响 ccui .ListView 的 效率 。 

下 面 的 代码 创建 了 一 个 列表 视图 ， 


1 // 加 载 [ListView] 

2 loadListView : function()t{ 

3 Var listView = new ccui.ListView!(); 

4 this.addChild(listView); 

5 listView.setTouchEnabled (true); 

6 listView.setContentSize(cc.size(240, 120)); 

7 listView.setDirection(ccui.ScrollView.DIR HORIZONTAL); 
8 listView.setBackGroundColor(cc.color(128, 128, 128)); 


9 listView.setBackGroundColorType (ccui.Layout .BG COLOR SOLID); 
40 listView.x = (cc.winSize.width - listView.width) / 2; 

11 listView.y = (cc.winSize.height - listView.height) / 2; 

本 二 


ccui .ListView 中 项 操作 的 相关 API 如 表 10-33 所 示 。 
表 10-33 ccui .Listview 中 项 操作 的 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 

无 ccui .Widget setItemModel (model) 设置 项 的 模型 

无 无 pushBackDefault Ttem() 插入 一 个 默认 项 (通过 克隆 模式 创建 ) 
到 列表 视图 的 尾部 

无 Number insertDefaultItem(index) 插入 一 个 默认 项 (通过 克隆 模式 创建 ) 
到 列表 视图 的 指定 位 置 

无 ccui .Widget pushBackCustomItem(item) 插入 一 个 自 定义 项 到 列表 视图 的 尾部 

无 ccui.Widget Number insertCustomItem(item,，index) 插入 自 定 义 UI 控件 到 列表 视图 中 指定 
索引 处 

无 Number removeltem(index) 删除 给 定 索引 的 项 

无 无 removeLastItem() 删除 最 后 一 个 项 

无 无 removeAllItems () 删除 所 有 项 

Number 无 getItem(index) 获取 给 定 索 引 的 项 

Array 无 getItems() 获取 所 有 项 

Number 无 getIndex (item) 获取 指定 项 的 索引 

Number 无 getCurSelectedIindex() 获取 当前 所 选项 的 索引 
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设置 项 的 模型 后 ,将 该 模型 作为 一 个 蓝图 ， 然 后 调用 pushBackDefaultItem 函 数 ， 将 克隆 
出 的 新 副本 插入 到 列表 视图 中 。 


在 ccui .ListVview 中 ， 还 可 以 设置 每 个 项 之 间 的 边 距 、 对 齐 方式 以 及 方向 ， 相 关 API 如 表 


10-34 所 示 。 


表 10-34 ccui .ListView 中 边 距 、 对 齐 方式 以 及 方向 相关 的 API 


返回 值 类 型 参数 类 型 函 数 说 明 
umber 无 getTItemsMargin () 获取 每 个 项 之 间 的 边 距 
无 Number setItemsMargin (margin) 设置 每 个 项 之 间 的 边 距 
umber 无 getGravity (gravity) 获取 对 齐 方式 
无 Number setGravity (gravity) 设置 对 齐 方式 
umber 无 getDirection() 获取 方 应 
无 Number setDirection (dir) 设置 方 所 
其 中 ,方向 的 可 取 值 和 ccui .scrollView 一 致 ， 见 10.9 节 。 此 外 ，ccui .ListView 还 有 一 


些 刷 新 相关 的 API， 如 表 10-35 所 示 。 


表 10-35 ccui .DistVview 中 刷新 相关 的 API 


返回 值 类 型 参数 类 型 函 数 说 明 
无 无 requestRefreshView() 请 求 刷新 视图 和 布局 
无 无 refreshView() 刷新 列表 视图 的 视图 
无 无 forceDoLayout () 强制 刷新 控件 的 布局 
无 无 doLayout () 请 求 刷新 控件 的 布局 


下 面 给 之 前 创建 的 1istView 添 加 几 个 项 目 : 


1 // 加 载 [ListView] 

2 loadListView : function(){ 

3 var listView = new ccui.ListView!(); 

4 J eg 

5 // 创建 按钮 

6 var default button = new ccui.Button(); 

7 default_button.setName ("TextButton"); 

8 default_button.setTouchEnabled (true); 

9 default_button.loadTextures ("res/unit10 ui/btn normal.png", "res/unit10 ui/ 


btn ressed.png", ""); 

// 创建 默认 模型 

var default_item = new ccui.Layout (); 
default_item.addChild(default_button); 
default_item.setTouchEnabled (true); 
default_item.setContentSize(default_button.getContentSize()); 
default_button.x = default_item.width / 2; 

default_button.y = default_item.height / 2; 

// 设置 模型 


INU 必 mwWD 姜 口 
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18 listView.setItemModel (default_item); 

19 // 添加 4 个 项 

20 for (var i = 0; i < 4; ++i) { 

21 listView.pushBackDefaultItem(); 

省 

23 // 给 前 4 个 项 设置 文本 标签 

24 for (var i = 0; i < 4; i++){ 

25 Var item = listView.getItem(i); 

26 var button = item.getChildByName ("TextButton"); 
2 var index = listView.getIndex(item); 
28 button.setTitleText ("按钮 "” + i); 

29 } 

30 } 


第 5 行 到 第 9 行 用 于 创建 并 配置 一 个 按钮 , 作为 默认 模型 的 基础 。 第 10 行 到 第 16 行 用 于 创建 并 
配置 默认 模型 。 第 18 行 设 定 listVview 的 默认 模型 为 aefault_item， 注意 它 是 一 个 
CCui .Layouto 
第 19 行 到 第 22 行 中 , 我 添加 了 4 个 默认 项 。 第 23 行 到 第 29 行 用 于 获取 之 前 添加 的 4 个 项 ,对 它 
们 进行 进一步 编程 ， 主 要 就 是 设置 它们 的 文本 标题 。 

最 后 ， 还 可 以 给 1istView 添 加 一 个 事件 监听 吉 ， 这 样 当 点 击 按钮 项 的 时 候 ， 便 可 以 知道 当 
前 点 击 的 是 哪个 按钮 ， 代 码 如 下 : 


1 // 加 载 [ListView] 

2 loadListView : function(){ 

3 // 创建 listView 

4 var listView = new ccui.ListView!(); 
与 this.addChild(listView); 

6 listView.setTouchEnabled (true); 

8 

9 


listView.setContentSize(cc.size(240, 120)); 
listView.setDirection(ccui.ScrollView.DIR HORIZONTAL); 
listView.setBackGroundColor(cc.color(128, 128, 128)); 


让 listView.setBackGroundColorType (ccui.Layout .BG_COLOR_SOLID) ; 
11 listView.x = (cc.winSize.width - listView.width) / 2; 

12 listView.y = (cc.winSize.height - listView.height) / 2; 

13 listView.addEventListener (function (sender, type) { 

了 在 Switch (type) { 

下 9 case ccui.ListView.EVENT _ SELECTED _ ITEM : 

16 cc.1og(" 当 前 项 索引 : " + sender.getCurSelectedIndex()); 
下 这 break; 

18 default: 

了 9 break; 

20 } 

21 }, this); 

22 .} 


运行 上 面 的 代码 ， 得 到 的 效果 如 图 10-10 所 示 。 
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图 10-10 ”ccui.ListVview 效 果 


10.13 ”实例 一 一 《保卫 萝卜 2》 关 卡 选择 页 面 的 开发 


在 前 面 的 章节 实例 中 ， 我 们 已 经 完成 了 《 保 ] 


HH 葛 卜 2》 的 主页 面 开发 ， 本 章 中 ,我们 将 完成 


《保卫 萝卜 2》 的 关卡 选择 页 面 。 同样 ,在 开发 之 前 , 先 来 看 下 本 实例 完成 后 的 效果 图 ， 如 图 10-11 


所 示 。 


图 10-11 


卫 葛 卜 2 》 关 卡 选择 页 了 


分 析 《 保 卫 葛 下 2》 的 关卡 选择 页 面 ， 可 以 明显 得 到 ， 我 们 应 该 把 这 个 场景 分 为 两 个 层 ， 
个 背景 层 ， 一 个 UI 层 。 其 中 ， 背 景 层 里 放 一 个 Scrollview ， 用 来 滚动 整个 地 图 。UI 层 存放 一 些 简 


单 的 按钮 和 图 片 等 节点 。 


与 MainMenu 场 景 类 似 ， 我 在 Carrot/src/Scene 跳 径 下 新 建 了 一 个 ChooseLevel 文 件 夹 ， 用 来 存 


放 关 卡 选 择 场景 中 的 脚本 文件 ， 文 件 组 


构 如 图 10-12 所 示 。 
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其 中 ChooseLevel.js 为 场景 组 织 文件 » 我 在 这 个 文 vv DCarrot 
~ Pp Dframeworks 
件 中 定义 了 ChooseLevelScene 场 景 ，ChooseLevelScene ee 
又 加 载 了 两 个 层 ， 分 别 是 背景 层 和 UI 层 ， 代 码 如 下 : et 
1 var ChooseLevelScene = cc.Scene.extend({ 
2 backgroundLayer : null, oan 
3 uiLayer : null, 四 Us 
4 onEnter : function () { ] Node 
> this._super(); 枢 ChooseLeveljs 
6 // 加 载 [背景 层 ] 4 E MainMenu 
的 this.loadBackgroundLayer () 下 definejs 
8 // 加 载 [ 主 层 ] resource.js 
, ee 图 10-12 关卡 选择 场景 中 的 文件 组 织 结构 


Fs 

loadBackgroundLayer : function()f{ 
this.backgroundLayer = new CLBackgroundLayer(); 
this.addChild(this.backgroundLayer); 

i 

loadMainLayer : function(){ 
this.uiLayer = new CLUILayer(); 
this.addChild(this.uiLayer); 


\D oOU 必 wm 上品 


过 
第 12 行 和 第 16 行 分 别 创建 了 背景 层 和 UI 层 ， 这 两 个 层 的 代码 实现 在 src/Scene/ChooseLevel/ 
Layer 中 的 Background.js 和 UI.js 文 件 里 。 


Background.js 文 件 中 定义 了 cLBackgroundLayer 类 ，CLBackgroundLayer 继承 上 自 
cc.Layer。 根据 前 面 的 分 析 得 出 , 在 CLBackgroundLayer 中 需要 一 个 ScrollView 对 象 来 深 动 
整个 背景 地 图 ， 接 下 来 就 来 创建 此 scor11View 对 象 ， 代 码 如 下 : 


1 // 加 载 [ 滚 动 视图 ] 

2 loadScrollView : function()f{ 

3 var node = new ccui.ScrollView!(); 

4 this.addChild (node); 

5 this.scorllView = node; 

6 node.setDirection(ccui.ScrollView.DIR HORIZONTAL); 
7 node.setTouchEnabled (true); 

8 node.setContentSize(cc.winSize); 

9 


10 Var nextPosX = 0; 

431 var imageView = null; 

十 站 for (var i = 0; i < 14; i++) { 

3 imageView = new ccui.ImageView("res/ChooseLevel/Map/stage map " + i + 
".png"); 


4 node.addChild (imageView); 
归 imageView.setAnchorPoint (cc.p(0, 0.5)); 
16 imageView.setPosition(nextPosX, cc.winSize.height / 2); 
17 nextPosxX += imageView.width; 
8 } 
9 
0 


node.setInnerContainerSize(cc.size (nextPosxX, cc.winSize.height)); 
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第 3 行 创建 了 ScrollView 对 象 , 第 6 行 设 定 了 此 ScrollView 的 滚动 方向 为 水 平方 向 , 第 7 行 
开启 了 ScrollView 对 象 的 触摸 开关 ， 第 8 行 设置 了 scrollvView 的 内 容 大 小 为 整个 窗口 的 大 小 。 

第 10 行 到 第 18 行 创建 出 地 图 背景 图 片 。 在 scrollView 中 , 子 节点 的 坐标 需要 我 们 自己 设 定 ， 
这 里 通过 一 个 for 循 环 干净 利索 地 添加 了 14 张 背景 图 。 第 1% 行 设 定 了 scrollView 的 布局 容器 大 
小 ， 这 里 next Posx 的 值 等 于 14 张 背景 图 宽度 的 总 和 。 

最 后 ， 在 CLBackgroundLayer 类 的 onEnter 函 数 中 ， 调用 1oadsScrol1lView 函 数 即 可 。 接 
下 来 ， 看 看 UI 层 的 开发 。 

显然 , UI 层 的 实现 代码 在 UIjs 文 件 中 。UI 层 中 需要 开发 的 是 左上 角 的 三 个 按钮 、 中 间 的 打折 
言 息 按 钮 以 及 右上 角 的 生命 星 显示 ， 如 图 10-13 所 示 。 


:Oo Emma 


图 10-13 ”关卡 选择 场景 的 顶部 按钮 


可 以 明显 看 出 , 左上 角 三 个 按钮 的 后 面 有 一 张 背景 图 片 , 这 张 背景 图 始终 位 于 当前 屏幕 的 左 
上 角 ， 所 以 可 以 将 它 的 销 点 设置 为 cc.p(0，1) ， 坐 标 设 为 cc.p(0，cc.winsize.height) ， 
代码 如 下 : 


1 // 加 载 [ 左 上 角 按钮 ] 
2 loadTopLeftButtons: function(){ 


3 var leftPanel = new ccui.ImageView("res/ChooseLevel/stagemap toolbar leftbg. 
png"); 

4 this.addCchild(leftPanel); 

二 leftPanel.setAnchorPoint (0, 1); 

6 leftPanel.setPosition(0, cc.winSize.height); 

7 Re 

8 } 


上 面 的 代码 保证 了 3 个 按钮 的 背景 始终 在 屏幕 的 左上 角 , 那么 剩 下 的 这 3 个 按钮 应 该 作为 谁 的 
子 节点 呢 ? 当前 层 吗 ? 不 是 ， 而 是 应 该 作为 背景 图 片 的 子 节点 ,使 得 三 个 按钮 和 按钮 背景 图 片 
“ 绑 ” 成 了 一 个 整体 , 这 样 的 相对 布局 保证 了 3 个 按钮 的 坐标 不 会 随 屏幕 大 小 的 不 一 致 而 产生 位 置 
错乱 ， 代 码 如 下 : 


1] /1/ 加 载 [ 左 上 角 按 钮 ] 

2 loadTopLeftButtons: function(){ 

六 var leftPanel = new ccui.ImageView("res/ChooseLevel/stagemap toolbar leftbg. 
png"); 


// 加 载 [首页 按钮 ] 
this.loadHomeButton(leftPanel); 

// 加 载 [ 商 店 按 钮 ] 
this.loadShopButton(leftPanel); 

// 加 载 [ 排 行 榜 按 钮 ] 
this.loadRankingButton(leftPanel); 


OO 


下 
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12 ), 
13 // 加 载 [首页 按钮 ] 
14 loadHomeButton : function(parent)t 
3 Var node = new ccui.Button(); 
6 Parent .addChild (node); 
站 这 Var textures = "res/ChooseLevel/stagemap_ toolbar home.png"; 
18 node.loadTextures (textures, textures, "™"); 
19 node.setPressedActionEnabled (true); 
20 node.setZoomScale(0.2); 
21 node.setAnchorpPpoint (0, 0); 
22 node.setPosition(10, 10); 
23 node.addTouchEventListener (function (sender, type) { 
24 if (type == ccui.Widget.TOUCH ENDED) { 
25 cc.director.runScene (new MainMenuScene()); 
26 } 
27 }, this); 
28 } 


通过 第 17 行 和 第 18 行 的 代码 可 以 看 出 ,“ 首 页 ”按钮 仅 采用 一 张 图 片 ， 所 以 我 们 应 该 给 按钮 
启用 被 按 下 时 的 缩放 操作 (第 19 行 )， 并 设置 按 下 的 缩放 比例 (第 20 行 )。 最 后 ， 第 23 行 到 第 27 
行 给 “首页 ”按钮 添加 了 触摸 事件 监 昕 器 ， 实 现 了 主页 面 场 景 MainMenuScene 的 切换 。 男 外 ， 
第 24 行 代码 用 于 判断 按钮 事件 是 否 在 触摸 结束 之 后 才 响 应 实现 逻辑 代码 , 在 开发 中 更 多 的 按钮 导 
件 响 应 都 应 该 放 在 触摸 结束 之 后 ， 而 不 是 触摸 释放 之 前 。 

“商店 ”和 “排行 榜 ” 按 钮 的 开发 和 “首页 ”按钮 几乎 一 致 ， 这 里 我 不 再 贴 出 代码 ， 你 可 以 
自行 参考 随 书 代 码 。 

在 中 间 促 销 按钮 中 ， 需 要 添加 一 个 rextBMFont 来 表示 当前 打 多 少 折扣 。 你 可 以 给 当前 层 定 
义 一 个 变量 ,例如 aiscountText， 然 后 让 它 指向 这 个 TextBMFont ， 这 样 在 其 他 函数 中 便 可 以 
通过 giscountText 控 制 显示 的 折扣 ， 代 码 如 下 : 


由 


1 // 加 载 [ 中 间 促 销 按钮 ] 
2 loadDiscountButton: function () { 
3 Var button = new ccui.Button(); 
4 this.addChild(button); 
5 Var resourceStr = "res/ChooseLevel/zh/discount tag_ stone.png"; 
6 button.loadTextures (resourceStr, resourceStr, "™"); 
下 button.setAnchorPoint (0.5, 1); 
8 button.setPosition(cc.winSize.width / 2, cc.winSize.height); 
9 button.addTouchEventListener (function (sender, type) { 

if (type == ccui.Widget .TOUCH ENDED) { 

cc.1og(" 点 击 促销 按钮 " ); 

} 
}, this); 
// 折扣 显示 
Var text = new ccui.TextBMFont ("8", "res/ChooseLevel/discount.fnt"); 
this.discountText = text; 
button.addChild (text); 
text.setAnchorPoint (0, 0); 
text.setPosition(145, 60); 


CDo~ mn 居 wh 品 


MD 上 
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右上 角 的 生命 星 组 成 与 中 间 限 时 折扣 按钮 类 似 , 最 底层 为 一 张 背景 图 , 顶层 为 生命 星 数 量 文 
本 ， 实 现 起 来 也 较为 简单 ， 具 体 可 见 随 书 代码 。 

最 后 ， 在 CLUILayer 的 构造 函数 中 调用 这 些 加 载 方法 ， 再 运行 ChooseLevelScene 场 景 ， 
可 以 得 到 如 图 10-11 所 示 的 《保卫 葛 卜 2》 关卡 选择 页 面 。 


至 此 ， 我 们 已 经 开发 了 主页 面 场 景 MainMenuScene 和 关卡 选择 场景 ChooseLevelScene。 
虽然 chnooseLevelScene 还 未 开发 完毕 ,但 是 已 经 可 以 将 两 个 场景 串联 起 来 ,从 而 实现 场景 的 切换 。 
你 应 该 还 记得 ， 在 《保卫 葛 卜 2》 的 主页 面 场景 中 有 个 “开始 冒险 ”菜单 按钮 ， 点 击 此 菜单 按钮， 
可 以 切换 到 关卡 选择 场景 。 此 菜单 按钮 的 实现 代码 位 于 MMMainLayer 的 1oadMenu 函 数 中 ， 找 到 代 
码 之 后 ， 在 “开始 冒险 ” 沫 单 按钮 的 事件 响应 函数 中 添加 场景 切换 代码 ( 详 见 下 面 的 第 11 行 ): 


1 // 加 载 [ 开 始 冒险 ] 和 [天 天 向 上 ] 菜单 

2 loadMenu : function(){ 

3 rn 

4 var start = new cc.MenuItemSprite!( 

5 startNormal, 

6 startPress, 

7 startDisabledqd, 

8 function(){ 

9 cc.audioEngine.playEffect (res.sd mm Select mp3); 
10 cc.109g ("点 击 “ 开 始 冒险 ”按钮 "); 

11 cc.director.runScene (new ChooseLevelscene()); 
1 这 }.bind(this)); 

人 


10.14 小结 


通过 本 章 的 学 习 ， 我 们 知道 了 在 Cocos2d-JS 中 有 个 UI 模 块 ， 其 命名 空间 为 ccui ， 它 提供 的 
UI 控 件 有 文本 、 按 钮 、 复 选 框 、 滑 块 、 图 片 视 图 、 加 载 条 、 编 辑 框 、 布 局 、 深 动 视 图、 分 页 视 网 
以 及 列表 视图 ， 学 习 了 这 些 UI 控 件 的 法 用 ， 了 解 了 它们 的 API。 在 最 后 的 章节 实例 中 ， 初 步 开发 
了 《保卫 蔓 卜 2》 的 关卡 选择 场景 。 


10.15 参考 资源 


本 章 的 参考 资源 为 Cocos 引 警 API: http://api.cocos.com/。 


性 能 优化 


性 能 优化 是 游戏 开发 中 必 不 可 少 的 一 门 技能 ， 性 能 优化 技巧 直接 考量 一 个 程序 员 的 能 力 所 
在 。 一 个 好 的 程序 员 不 仅 能 写 一 手 好 代码 ， 更 应 该 熟悉 各 种 各 样 的 优化 技巧 。 本 章 将 围绕 
Cocos2d-JS 游 戏 的 性 能 优化 方案 展开 ， 讲 解 Cocos2d-JS 游 戏 性 能 优化 技巧 。 

本 章 内 容 : 
口 对 象 缓冲 池 (cc .pool ) 
口 批量 演 染 ( spriteBatchNode ) 
口 烘 培 层 (Bake Layer ) 
口 SpriteSheet 资 源 优化 


11.1 对象 缓冲 池 
在 游戏 中 ， 有 些 对 象 常 常 被 不 断 创 建 和 销毁 ,例如 MoonWarriors 中 的 子弹 、 敌 机 等 ， 这 类 对 


条 高 频 地 创建 和 销毁 会 给 游戏 带 来 极 大 的 性 能 消 三 ,这 显然 存在 一 定 的 优化 空间 。 好比 说 , 我 人 国 讨 8 


每 次 吃饭 需要 花费 15 分 钟 ， 家 里 直接 取 特 子 只 需 20 秒 ,但 倘若 你 每 次 吃饭 要 去 超市 买 新 结子 ， 
那 我 估计 等 你 买 完 筷子 回来 的 时 候 ， 你 妈妈 早已 把 你 的 饭菜 给 倒 了 ， 因 为 这 是 一 个 极其 思春 且 
不 理智 的 做 法 。 所 以 ， 你 应 该 试想 ， 在 Cocos2d-JS 中 是 否 存在 一 种 技术 方案 ， 可 以 将 子弹 、 飞 机 
等 这 些 经 常 需要 被 创建 和 销毁 的 对 象 在 创建 之 后 ， 就 将 它们 缓存 起 来 ， 当 需要 用 的 时 候 ， 直 接 
从 缓存 中 取出 , 不 需要 的 时 候 放 回 缓存 待命 即 可 , 这 样 就 可 以 优化 高 频 创 建 和 销毁 所 带 来 的 性 能 
消耗 。 

然而 答案 是 存在 的 ，Cocos2d-JS 提 供 了 一 个 对 象 缓冲 池 (cc .pool 对 象 ) 供 我 们 解决 此 类 


说 明 cc.pool 对 象 缓 冲 池 适 合 管理 那些 高 频 创 建 和 销毁 的 对 象 ， 例 如 子弹 、 敌 人 对 象 ， 而 游 
戏 背 景 等 这 类 非 “ 活 跃 ” 对 象 则 不 适用 。 若 要 使 用 cc.poo1l， 则 需要 在 projectjson 的 
modules 数 组 中 添加 ccpool 项 。 
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11.1.1 ”让 我 们 的 类 支持 cc.pool 管理 
对 象 的 缓存 以 及 取出 都 由 cc. 0 要 想 让 类 支持 cc .pool 管 理 ， 就 必须 实现 reuse 
和 unuse 这 两 个 方法 , 这 是 因为 ， 对 象 缓存 通过 cc .pool .putInPool(object) 函数 实现 ,该 函 


数 会 去 调用 该 对 象 的 unuse 方 法 。 
的 操作 。 


一 般 情况 下 ， 我 们 会 在 unuse 方 法 中 完成 对 象 被 放 入 缓冲 池 前 


reuse 则 是 当 我 们 要 从 对 象 缓冲 池 中 取出 对 象 时 所 触发 的 函数 ,我 们 可 以 在 这 里 完成 对 象 的 


重新 初始 化 ， 
理解 为 “复活 ”而 非 创 建 。 下 面 我 们 写 一 


让 它 变 为 可 用 状态 。 简 单 来 说 ， 可 以 将 unuse 理 解 为 “死亡 ”而 非 销 毁 ， 将 *euse 
个 类 ， 使 其 支持 cc .pool 管 理 : 


眶 


1 var SupportPoolHero = cc.Sprite.extend({ 

2 _hp : 0， // 血 量 

3 _sp : 0， / 愤怒 

4 _mp : 0， // 魔法 

5 ctor: function (hp, mp, sp) { 

6 this. super(res.sh node 64 png); 

所 this.initData(hp, mp, sp); 

8 3 

9 initData: function (hp, mp, sp) { 

10 this. hp, this. mp, this. sp = hp, mp, sp; 
11 二 

12 unuse: function () { 

本 this. hp = this. mp = this. sp = 0; 

14 this.retain(); // 使 其 引用 计数 +1， 防 止 被 内 存 回收 
Ts this.removeFromParent (); 

16 3 

17 reuse: function (hp, mp, sp) { 

18 this.initData(hp, mp, sp); 

19 } 

20. 4)3 

ll 

22 SupportPoolHero.create = function (hp, mp, sp) { 
23 return new SupportPoolHero(hp, mp, sp) 

24 }; 

25 

26 Supporthoo Horo, reCreate = function (hp, mp, sp) { 
27 // 判断 [对 象 缓冲 池 中 是 否 有 可 用 对 象 ] 

28 if (cc.pool.hasObject (SupportPooIHero) ) { 

29 // 从 对 象 缓冲 池 中 获取 对 象 

30 return cc.pool.getFromPool (SupportPoolHero, hp, mp, sp); 
31 }elsef 

32 // 创建 一 个 新 的 对 象 

33 return SupportPoolHero.create(hp, mp, sp); 
34 } 

3 


在 上 述 代码 中 , 我 们 已 经 定义 好 了 一 个 支持 cc .pool 的 类 。 
cc.pool 的 函数 。 实 际 上 ，cc.pool 暴 露出 给 用 户 调用 的 函数 并 不 多 ， 只 有 5 个 ， 如 表 


到 了 一 个 
11-1 所 示 。 


在 上 述 代码 的 第 28 行 中 , 我 们 看 


11.1 对 象 缓 冲 池 173 


表 11-1 cc.pool1 暴 露出 给 用 户 调用 的 函数 


函 数 名 说 明 
cc.pool.putInPool (obj); 将 对 象 放 入 对 象 缓冲 池 中 
cc.pool.hasobject (objClass); 判断 回收 池 中 是 否 有 可 用 的 指定 对 象 
cc.pool.removeObject (obj); 删除 回收 池 中 的 指定 对 和 象 
cc.pool.getFromPool (objClass); 从 回收 池 回 收 指定 对 象 
cc.pool.drainAllPools(); 清空 对 象 缓冲 池 


一 般 情 况 下 ，cc.pool 作 用 于 游戏 玩法 场景 ， 所 以 ， 当 游戏 切换 到 UI 场 景 时 ，cc.pool1 中 组 
存 的 对 象 不 再 需要 ， 此 时 为 了 避免 不 必要 的 内 存 占 用 ， 应 该 调用 cc.pool.arainAl1Pools () 
清空 对 象 缓冲 池 。 


11.1.2 ”使 用 cc.pool 管理 对 象 
使 用 cc .pool 管 理 对 象 ， 具 体 可 分 为 以 下 三 步 。 
第 一 步 : 条 件 配 置 一 一 让 我 们 的 类 支持 cc .pool， 这 已 经 在 11.1.1 节 中 实现 了 。 


第 二 步 : 预备 工作 一 一 首次 创建 好 一 定量 的 对 象 ， 并 把 它们 放 到 对 象 缓冲 池 中 。 创建 一 定量 
的 对 象 非常 合情合理 ， 因 为 我 们 必须 保证 缓冲 池 和 外 界 需要 的 供求 关系 ， 若 缓冲 池 中 对 象 不 足 ， 
则 该 类 会 创建 新 的 对 象 实例 ， 并 将 其 放 入 对 象 缓冲 池 中 。 预 备 工作 的 代码 如 下 : 


1 // 准备 工作 [创建 好 对 象 ， 并 把 它们 放 入 对 象 缓冲 池 中 ] 

2 prepareHeroForPool : function(){ 

3 for (var i = 0; i < 3000; i++) { 

4 Var node = SupportPoolHero.create(0, 0, 0);} 
与 this.addChild (node); 

6 cc.poolLl.putInPool (node); 

} 

8 +} 


通过 上 述 代 码 的 第 6 行 ， 我 们 已 经 成 功 地 将 创建 的 对 象 放 入 对 象 缓冲 池 中 。 因 为 cc.pool . 
putInPool () 函数 中 调用 了 supportPoolHero 类 的 unuse () 方 法 ， 而 unuse() 方 法 中 实现 了 
this.removeFromParent () 函数 , 所 以 此 时 在 场景 中 看 不 到 这 些 对 象 , 但 它们 已 经 被 添加 到 了 
对 象 缓冲 池 中 。 

第 三 步 : 一 切 就 绪 一 一 任性 使 用 。 

当 预 备 工 作 准备 结束 之 后 ， 对 象 缓冲 池 已 经 有 3000 个 supportPoolHero 对 象 ， 可 以 通过 如 
下 代码 将 SupportPoolHero 对 象 添加 到 场景 中 : 


1 // 从 pool 中 获取 英雄 

2 addHeorByPool: function () { 

3 Yn 

4 for (var i = 0; i < 3000; i++) { 

5 Var node = SupportPoolHero.reCreate(4, 5, 6); 
6 this.addChild (node); 
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node.setPosition(10 * i, cc.winSize.height * 0.8); 
8 } 

9 A 

二 人 -} 


ww 


需要 注意 的 是 ， 在 上 述 代 码 的 第 $ 行 ,我们 通过 SupportPoolHero.recreate(args) 函数 
创建 对 象 ， 它 会 优先 去 缓冲 池 中 取出 对 应 的 对 象 ， 若 对 象 不 存在 ， 才 会 新 建 对 象 。 图 11-1 为 直接 
创建 3000 个 精灵 和 使 用 pool 创 建 3000 个 精灵 的 时 间 消 耗 对 比 图 。 


直接 创建 3000 个 精灵 ! 使 用 pool 创 建 3000 个 精灵 ! 


直接 创建 耗费 :134ms 使 用 pool 创 建 耗费 :21ms 


图 11-1 使 用 ccPool 获 取 和 直接 创建 3000 个 精灵 的 性 能 消耗 对 比 图 


说 明 本章 的 完整 测试 代码 在 随 书 代码 res/unitll optimize 中 ， 因 部 分 代码 较 多 ， 故 不 在 书 中 一 
一 讲解 ， 读 者 可 自行 打开 随 书 代 码 查 阅 或 运行 。 


11.2 ”批量 泻 染 


游戏 的 这 染 , 往往 是 游戏 性 能 开销 所 在 ， 其 消耗 了 大 量 的 资源 和 内 存 。 在 实际 开发 中 , 我 们 
常常 将 图 片 按 模 块 分 类 ， 然 后 用 TexturePacker 合 成 大 图 ， 这 不 仅 可 以 合理 地 管理 图 片 资源 ， 也 更 
贴近 引擎 的 泻 染 人 优化。 虽然 在 JSB 中 ， 底 层 的 Cocos2d-x 从 3.0 版 本 之 后 就 提出 了 自动 批 泻 染 
(auto-batching ) 的 概念 ， 但 在 Web 上 ，spriteBatchNode 技 术 仍 被 推荐 使 用 。 

SpriteBatchNode 为 批 处 理 绘制 精 录 ， 其 原理 是 : 创建 一 张 纹理 ， 然 后 将 多 个 精灵 添加 到 
此 纹理 中 ， 绘 制 时 直接 绘制 该 纹理 ， 无 需 单独 绘制 子 节点 。 我 们 都 知道 ， 在 Cocos2d-x 中 ， 引 擎 
采用 OpenGL ES 2.0 演 染 精 录 。 在 Web 上 ，3 引 苟 优 先 采 用 WebGL 演 染 ， 若 不 支持 WebGL， 则 采用 
Canvas 绘 制 。 但 不 管 是 采用 OpenGL ES 还 是 WebGL 泻 染 精灵 , 其 演 染 每 个 精灵 的 过 程 都 会 经 历 “ 打 
开 一 绘制 一 关闭 ”的 流程 。 也 就 是 说 ， 若 有 N 个 精灵 ， 则 会 有 N 次 “打开 一 绘制 一 关闭 ”的 纹理 
切换 流程 ， 而 通过 spriteBatchNodqe， 绘 制 每 个 精灵 的 过 程 演变 为 : 打开 一 绘制 一 绘制 一 … 一 
关闭 ， 游 戏 每 一 帧 泻 染 的 时 候 ， 只 打开 创建 好 的 一 张 纹 理 ， 然 后 绘制 N 个 精灵 ， 省 去 了 N-1 次 打 
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开 和 关闭 的 时 间 ， 从 而 最 终 实 现 了 演 染 性 能 优化 。 


11.2.1 Cocos2d-JS 中 的 SpriteBatchNode 类 


SpriteBatchNode 类 位 于 cocos2d/core/sprites/CCSpriteBatchNode.js 文 件 中 ， 它 继承 自 
cc.Node, 并 重 写 了 addchild()、removeChild()、sortAllChildren()、visit()、draw() 
等 方法 。 另 外 ，adaqchilda() 方 法 在 WebGL 和 Canvas 泻 染 模 式 下 分 别 被 重 指向 相对 应 的 函数 ， 其 
指向 代码 (片段) 如 下 : 


if (cc. renderType === ccC._ RENDER TYPE WEBGL) { 
六 


og 
fon 
[en 
QQ 
5D 
已- 
全 
[en 
1 


= _p._addChildForWebGL; 
人 人 


_p.addChild = _p._addChildForCanvas; 
J i 


OJONRODP 


‘Oo 


在 _addchildForWebGL () 方 法 中 ，spriteBatchNode 限 制 了 其 子 节点 只 能 是 精灵 或 者 精 
灵 的 子 类 ， 日 子 节 点 和 spriteBatchNode 必 须 使 用 同一 个 纹理 ( Texture2D ) 对 象 ， 代码 如 下 : 


1 _addChildForWebGL: function (child, zOrder, tag) { 


2 // 检查 [child 是 否 为 空 ] 
3 cc.assert (child != null, "cc.SpriteBatchNode.addChild(): child should be 
non-null"); 
4 // 检查 [chi1ld 是 否 是 精灵 或 者 精灵 的 子 类 ] 
5 if (!(chilgd instanceof cc.Sprite)) { 
6 cc.log("cc.SpriteBatchNode.addChild(): cc.SpriteBatchNode only supports 
cc.Sprites as children"); 
7 return; 
8 } 
9 // 检查 [child 是 否 使 用 了 同一 个 纹理 id] 
10 if (child.texture != this.textureAtlas.texture) { 
11 cc.log("cc.SpriteBatchNode.addChild(): cc.Sprite is not using the same 
texture"); 
| return; 
3 } 
14 
5 ZzOrder = (zOrder == null) ? child.zIndex : ZzOrder; // 设置 [ZzOrder 值 ] 
6 tag = (tag == null) ? child.tag : tag; // 设置 [tag 值 ] 
深 
18 cc.Node.prototype.addChild.call (this, child, zOrder, tag); 
19 this.appendChild (child); 
20 this.setNodeDirty(); 
本 的， 


由 于 SpriteBatchNode 只 是 绘制 一 张 纹理 ， 所 以 我 们 不 能 为 每 个 子 节点 单独 设置 相关 的 绘 
制 参数 ， 例 如 反 锯 齿 、 过 滤 、 混 合 等 模式 ， 并 且 也 只 能 设置 一 个 着 色 器 程序 。 
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口 在 Cocos 引 擎 中 , ParticlesSystem、Label、TiledMap 等 都 是 采用 SpriteBatchNode 泻 染 。 
口 SpriteBatchNode 仅 在 WebGL 泻 染 模 式 下 有 效 ， 在 Canvas 泻 染 中 , 则 其 子 节点 都 变 成 
正常 节点 ， 不 具有 性 能 优化 效果 。ParticlesSystem 在 Canvas 泻 染 模 式 下 较 卡 ， 也 正 是 因 
为 Canvas 泻 染 不 支持 SpriteBatchNode。 


11.2.2 使 用 spriteBatchNode 


SpriteBatchNode 批 处 理 泻 染 的 用 法 较为 简单 ， 主 要 分 为 如 下 3 步 。 
第 一 步 : 将 纹理 加 载 到 内 存 。 

第 二 步 : 创建 spriteBatchNode。 

第 三 步 : 创建 精灵 并 将 其 添加 到 spriteBatchNode。 

具体 代码 如 下 : 


六 


Ns 


六 


1 var BatchNodeLayer = cc.Layer.extend({ 
2 batchNode : null, 

3 ctor : function(){ 

4 this._super(); 

5 // 第 一 步 : 加 载 [资源 ] 

6 this.loadResource(); 

7 // 第 二 步 : 加 载 [BatchNode] 

8 this.loadBatchNode (); 

9 // 第 三 步 : 加 载 [8000 个 精灵 ] 


10 this.loadSomePrince(); 

生出 3 

12 // 加 载 [资源 ] 

13 loadResource : function(){ 

14 cc.textureCache.addIimage (res.ul3 prince png); 

于 与 cc.spriteFrameCache.addSpriteFrames (res.ul3 prince plist); 
16 ks 

17 // 加 载 [SpriteBatchNodel] 

18 loadBatchNode : function(){ 

19. this.batchNode = new cc.SpriteBatchNode (res.ul3 prince png); 
20 this.addChild(this.batchNode); 

21 }s 

22 // 加 载 [8000 个 精灵 ] 并 将 其 添加 到 this.batchNode 中 

23 loadSomePrince : function(){ 

24 Var node = null; 

29 Var pos = cc.p(0, 0); 

26 for (var i = 0; i < 8000; i++) { // 创建 8000 个 精灵 

2 node = new cc.Sprite("#prince stand 1.png" ) : 

28 this.batchNode.addChild(node); // 添加 到 batchNode 对 象 中 
29 

30 pos.x = Math.random() * cc.winSize.width; 

31 pos.y = Math.random() * cc.winSize.height; 
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32 
33 
34 
3 号 


有 


node.setPosition(pos); 


} 


上 述 代 码 创 建 了 8000 个 精灵 。 图 11-2 和 图 11-3 分 别 为 使 用 spriteBatchNode 和 没有 使 用 
spriteBatchNode 的 性 能 对 比 ， 图 11-2 的 帧 率 为 60， 而 图 11-3 的 帧 率 只 有 27.7。 


> 
ye 
的 set < 
图 11-2 ”使 用 spriteBatchNode 演 染 图 11-3 ”未 使 用 spriteBatchNode 演 染 
11.3” 烘 培 层 
在 一 些 带 有 关卡 的 游戏 中 , 为 了 节约 资源 , 通常 会 采用 一 些 简约 背景 图 片 加 配置 装饰 物 的 方 
式 生成 背景 效果 , 其 自身 和 子 节点 在 创建 完毕 后 , 就 很 少 发 生 例 如 添加 、 删除 、 运 行动 作 等 变动 ， 


像 这 类 “活跃 性 ” 较 低 的 屋 ，Cocos2d-JS 为 其 量 身 定制 了 一 套 演 染 优化 机 制 


图 层 预 烘 培 。 


图 层 预 烘 培 优化 得 益 于 Cocos2d-JS 为 cc .Layer 追 加 的 bake 也 数 ,一 个 调用 了 bake 也 数 的 层 


会 将 其 自身 以 及 所 有 子 节点 烘 培 到 一 张 画布 (canvas ) 上 ， 只 要 自身 以 及 所 有 子 节 点 不 发 生 例如 
添加 或 删除 子 节 点 ， 以 及 运行 动作 等 变动 行为 , 那么 在 下 一 帧 绘制 时 ， 引 擎 会 将 预 烘 培 到 画布 上 | 


的 内 容 直 接 绘制 出 来 , 从 而 实现 泻 染 优化 , 使 得 原本 需要 调用 多 次 绘制 的 层 , 现在 只 需 绘制 一 次 。 
图 层 供 培 优化 技术 的 步骤 较为 简单 ,只 需 将 需要 烘 培 的 节点 元 素 添 加 到 某 一 层 中, 然后 调用 
该 图 层 的 bake 函 数 即 可 ,代码 如 下 : 


‘OO OOOODODPp 


法 
(LD 


户 户 户 
DPO 


var 
var 
var 
for 


} 


layer = new cc.Layer(); 

node = null; 

pos = cc.p(0, 0); 

(var i = 0; i < 8000; i++) { // 创建 8000 个 精灵 
node = new cc.Sprite("#prince stand 1.png"); 
layer.addChild (node); 


// 配置 [坐标 属性 ] 

pos.x = Math.random() * cc.winSize.width + 150; 
pos.y = Math.random() * cc.winSize.height; 
node.setPosition(pos); 


layer.bake(); 
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上 述 代码 创建 了 8000 个 精灵 。 


图 11-4 和 图 11-5 分 别 为 烘 培 前 和 烘 培 后 的 效果 对 比 。 可 以 明显 


看 到 ， 左 下 角 的 arawcal1 从 8006 降 到 了 4， 帧 率 也 从 25.5 提 升 到 了 59.9。 


另外 ， 当 图 层 不 需要 烘 培 时 ， 可 以 通过 unb 
Src/unit11_optimize/LayerBakeLayerjs。 


bake 
unbake 
run action 


图 11-4 人 烘 培 前 效果 


说 明 
口 bake 功 能 适用 于 “活跃 性 ” 较 低 的 图 层 ， 
给 游戏 带 来 额外 的 性 能 开销 。 


会 报错 ， 但 也 无 任何 效果 。 
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ake 取 消 烘 培 。 本 闻 的 详细 代码 见 随 书 源码 


bake 
unbake 
run action 


RAR 


pS WS re 


对 于 子 节点 以 及 自身 经 常 发 生变 动 的 层 ， 则 会 


口 bake 功 能 仅 在 Canvas 泻 染 模式 下 有 效 。 在 JSB 以 及 WebGL 泻 染 模式 下 调用 该 函数 ， 虽 不 


图 片 资源 不 仅 影响 游戏 安装 包 的 大 小 , 也 会 占据 大 部 分 的 内 存 空 间 , 游戏 安装 包 的 大 小 直接 


影响 用 户 的 下 载 量 ,而 内 存 的 开销 则 影响 游戏 的 性 能 。 所 以 ， 合 型 


优化 的 一 种 技术 。 


地 管理 和 优化 资源 ， 也 是 游戏 


在 实际 开发 中 , 我 们 通常 会 将 图 片 通过 TexturePacker 合 成 大 图 , 这 不 仅 可 以 合理 地 管理 资源 ， 


也 更 贴 合 引擎 的 泻 染 优化 ， 例 如 SpriteBatchNode 和 Auto-Batching 等 。 本 节 将 介绍 如 何 利 月 
图 ， 从 而 缩小 游戏 安装 包 的 大 小 以 及 降低 游戏 内 存 开 销 


TexturePacker 合 成 大 


11.4.1 图 片 内 存 计算 


O 


一 张 图 片 载 和 人 内存 所 占用 的 大 小 为 : bytes = width * height * bitsPerPixel / 8。 


其 中 ,bytes 表 示 总 字 节 数 ，wigdth 和 height 分 另 
素 深度 ， 表 示 存 储 每 个 像素 所 用 的 位 数 ， 它 也 是 月 


1 表示 图 片 的 宽度 和 高 度 。pbitsPerPixel 为 像 
日 来 度量 图 像 的 分 辩 率 的 一 个 标准 。 
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在 OpenGL/WebGL 中 ,纹理 的 宽度 和 高 度 都 必须 是 2 的 n 次 究 。 例 如 ,一 张大 小 为 480 x 320 的 
图 片 , 在 载 人 内 存 后 ， 其 纹理 大 小 变 为 512 x 512, 若 大 小 为 70 x 300， 则 纹理 大 小 变 为 128 x 512， 
纹理 大 小 始终 遵循 “超出 ， 则 向 上 取 最 接近 的 2 次 才 数 ”的 原则 。 在 Cocos2d-JS 中 ， 默 认 情况 下 ， 
一 个 像素 用 4 个 字 节 表示 , 一 个 字 节 占 8 位 ,每 个 字 节 分 别 表示 Red ( 红色 )、Green (绿色 )、Blue 
( 蓝 色 ) 以 及 Alpha( 透明 通道 )。 所 以 ， 一 张 像素 深度 为 32、 大 小 为 480 x 320 的 图 片 所 占用 的 内 
存 为 : 


512 x 512 x 32/8=1048576B = 1024KB = 1MB 
实际 上 ， 这 样 的 加 载 方式 浪费 了 2 块 大 小 分 别 为 512 x 192 和 32 x 320 的 空间 ， 如 图 11-6 所 示 。 


图 11-6 ”小 图 直接 加 载 的 内 存 浪 费 情况 图 11-7 小 图 合成 大 图 


试想 一 下 ， 若 所 有 的 图 片 ， 都 通过 这 样 的 方式 加 载 到 内 存 ， 那 么 必然 照 成 大 量 的 内 存 浪费 ， 
所 以 在 游戏 开发 中 , 我们 通过 TexturePacker 将 所 有 的 小 图 合成 大 图 ( 如 图 11-7 所 示 ), 合理 地 规划 
资源 ， 将 浪费 的 纹理 空间 充分 利用 起 来 ， 降 低 了 内 存 的 开销 。 


11.4.2 TexturePacker 


TexturePacker 是 一 个 跨 平台 的 图 片 打 包 软 件 ， 它 通过 指定 的 图 片 排列 算法 将 多 张 小 图 合成 一 
张大 图 ， 高 效 充 分 地 利用 了 纹理 空间 ， 大 大 降低 了 普通 图 片 加 载 到 内 存 所 造成 的 内 存 浪费 。 
TexturePacker 不 仅 可 以 将 小 图 合成 大 图 ， 还 可 以 改变 大 图 的 图 片 格式 、 对 图 片 资 源 加 密 等 。 
TexturePacker 的 下 载 地 址 为 https://www.codeandweb.com/texturepacker/， 图 11-8 为 TexturePacker 页 
面 图 。 
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图 11-8 TexturePacker 页 面 网 
1. 工具 栏 


和 大 多 数 软件 一 样 ，TexturePacker 顶 部 都 是 工具 栏 ， 无 非 就 是 一 些 新 建 、 打 开 、 保 存 等 基础 
操作 。 通 过 点 击 Add Sprites 按 钮 ， 选 取 需 要 的 图 片 导入 。 当 然 ， 也 可 以 直接 把 图 片 或 者 文件 夹 拖 
忠 到 右 侧 的 Sprites 中 。 


2. TextureSettings 


在 图 11-8 中 ， 左 侧 的 TextureSettings 是 一 些 设 置 ， 包含 输出 ( Output )、 构 图 (Geometry )、 布 
局 (Layout ) 等 模块 。 


在 输出 Output ) 模块 中 ， 主 要 选项 解释 如 下 。 


口 Data Format: 格式 化 为 选中 框架 所 支持 的 数据 格式 ， 当 前 默认 选 定 为 cocos2d。 

口 Data filename/Texture file: plist 和 纹理 文件 的 输出 路 径 。 纹 理 的 默认 大 小 为 2048 x 2048， 

这 是 大 多 数 设备 能 够 支持 的 最 大 限制 。 倘 若 我 们 将 打包 的 图 片 合成 大 图 后 ， 其 纹理 大 小 

超出 了 2048 x 2048，TexturePacker 会 在 其 右 下 角 提示 我 们 进行 分 包 操作 ， 如 图 11-9 所 示 。 

此 时 色 选 Layout 中 的 Multipack 复 选 框 ,然后 在 Data filename/Texture file 输 入 栏 中 输入 路 径 ， 
其 分 包 格 式 为 xxx {n}.plist 或 者 xxx{n}.png， 如 图 11-10 所 示 。 


11.4 ”SpriteSheet 资源 优化 181 


6 not fitting sprites - try using multipacking, Size: 2048x2048 (16384kB) 
图 11-9 ”分 包 操 作 提示 
Datafilename /Users/Jeff/Documents/img/bgMap_{n}.plist 


Texture format ， PNG (.png) 


Texture file /Users/Jeff/Documents/img/bgMap_{n}.png 


图 11-10 分 包 之 后 的 文件 名 格式 


口 Texture format: 纹理 格式 化 格式 。 常 用 的 有 PNG 和 PVR 格式 。 在 HTML5 上 ,， 仅 支持 PNG 
格式 。PVR 为 压缩 格式 ， 这 个 格式 的 文件 是 iOS 设 备 世 片 不 需要 经 过 解析 就 能 直接 读 取 和 
显示 的 文件 。 相 比 PNG 格 式 ，PRV 拥 有 运行 速度 更 快 以 及 内 存 消耗 更 低 的 优势 。 一 般 情况 
下 ，PVR 消 耗 的 内 存 比 PNG 小 25% 左 右 。 

当 格 式 选择 PVR 类 型 时 ， 应 当 色 选 Premultiply alpha 复 选 框 。 另 外 ，PVR 格 式 支 持 图 片 加 
密 ,我 们 可 以 点 击 Output 下 的 Content protection 按 钮 ,然后 再 分 别 点 击 Create new key 一 Save 
as global key 一 Use global key 按 钮 ， 或 者 点 击 Content protection 按 钮 后 直接 点 击 Use global 
key， 它 会 一 步 到 位 ， 自 动 帮 我 们 生成 并 使 用 密 钥 ， 如 图 11-11 所 示 。 注 意 ， 生 成 密 钥 后 ， 
不 要 忘记 记录 你 的 密 钥 ， 因 为 在 游戏 中 ， 我 们 需要 它 来 对 资源 进行 解密 。 


Encryption key (128bit), as 32 hex digits 


28dce638e5b271777097e4d6323dc78e 


Create new key Clear / Disable Save as global key Use global key 


图 11-11 密 钥 生成 
在 构图 (Geometry ) 和 布局 (Layout ) 模块 中 ， 主 要 选项 解释 如 下 。 


口 Max size: 设 定 SpriteSheet 大 小 的 最 大 值 ， 默 认为 2048 x 2048。 目 前 ， 大 多 数 的 设备 都 能 

支持 这 个 大 小 ， 若 设置 过 大 ， 则 在 其 他 低 端 手机 上 会 加 载 失 败 。 所 以 ,保持 默认 值 即 可 。 

口 Scale: 缩放 系数 , 其 取 值 范围 为 [0, 1], 其 中 包含 0 和 1。 当 Scale 系 数 为 0.5 时 , TexturePacker 
会 生成 一 张 宽度 和 高 度 是 原始 图 片 一 半 的 普 清 图 片 ， 这 对 于 以 前 在 不 支持 高 清 显 示 的 设 
备 上 制作 SpriteSheet 非 常 有 用 。 

口 Algorithm : 图 片 排列 算法 ， 默认 是 MaxRects,， 它 按照 图 片 尺寸 大 小 排列 。 如 果 选 择 Basic 

算法 ， 则 是 按 行 排列 ， 当 第 一 行 排 满 之 后 ， 再 排 到 第 二 行 。 

口 Border/shape padding : 设置 在 SpriteSheet 里 图 片 与 图 片 之 间 的 间隔 。 
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口 Extrude: 精灵 边界 的 重复 像素 个 数 ， 若 合成 SpriteSheet 后 ， 边 缘 出 现 一 两 个 透明 像素 ， 
将 此 值 设置 大 一 点 即 可 ， 例 如 1 或 者 2。 
口 Trim: 移 除 图 片 四 周 的 透明 区 域 。 这 使 得 一 张 SpriteSheet 能 更 好 更 多 地 摆 放 图 片 。 移 除 掉 
的 透明 区 域 在 游戏 中 不 影响 ， 只 是 单纯 地 为 了 能 在 一 张 SpriteSheet 摆 放 更 多 的 图 片 。 
口 Shape outlines: 用 于 打开 精灵 的 边框 ， 这 在 调试 的 时 候 极 其 有 用 。 

剩余 其 他 设 定 ， 一 般 保 持 默认 值 即 可 。 

当 使 用 TexturePacker 合 成 SpriteSheet 大 图 之 后 ， 会 生成 一 个 .plist 配 置 文件 和 一 个 .png (或 者 
pvr.ccz 等 ) 图 片 资源 文件 。 在 程序 中 ， 通 过 如 下 代码 可 将 SpriteSheet 大 网 加 载 到 内 存 : 


1 cc.textureCache.addImage (res.ul3 prince png); 
2 cc.spriteFrameCache.addSpriteFrames (res.ul3 prince plist); 


11.4.3 图片 资源 压缩 


在 HTML5 上， 我 们 必须 高 度 重 视 游戏 的 加 载 速度 ， 过 长 的 加 载 速度 轻 则 影响 用 户 体 验 ， 重 
则 造成 用 户 流失 。 游戏 的 加 载 速度 由 游戏 包 的 大 小 以 及 HTTP 对 图 像 资源 的 请 求 次 数 等 共同 决定 。 
我 们 可 以 通过 TexturePacker 将 大 量 的 小 图 合成 大 图 ， 这 降低 了 HTTP 的 请 求 次 数 。 而 游戏 包 的 大 
小 ， 我 们 一 般 采 用 TinyPNG 对 图 片 进行 压缩 。 

TinyPNG 是 一 球 来 自 国外 的 在 线 图 片 压缩 云 应 用 ， 其 链接 为 https://tinypng.conm/ ， 页 面 如 图 
11-12 所 示 ， 我 们 可 以 将 需要 压缩 的 图 片 直接 拖 忠 进去 ， 就 可 自动 压缩 ， 压 缩 完毕 后 ， 点 击 
download， 即 可 下 载 压缩 好 的 图 片 。 


OB@ < "3 https://tinypng.com C 由 口 © 


HOME 


PHOTOSHOP DEVELOPER API 


Drop your .png or .jpg files here! 
Upto 20 images, max 5 MB each. 


图 11-12 ”TinyPNG 页 面 


我 试 着 拖 忠 一 些 图 片上 去 压缩 ,压缩 后 如 图 11-13 所 示 。 我 们 发 现 ， 压缩 率 在 70% 左 右 ， 这 是 
因为 TinyPNG 将 我 们 上 传 上 去 的 图 片 压缩 为 8 位 的 图 片 ， 如 果 仔 细 对 比 压缩 前 和 压缩 后 的 图 片 ， 
还 是 能 发 现 差别 的 ,特别 是 在 一 些 渐变 等 过 渡 效 果 上 。 经 过 压缩 的 图 片 , 质量 已 经 下 降 了 ,所 以 
我 们 需要 平衡 好 图 像 大 小 和 质量 。 压 缩 是 一 把 利 剑 ， 虽 好 ， 但 不 可 滥用 。 
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stagemap_31-40.png 368.7 KB finished 130.5 KB download -65% 
Path53.png 116.8 KB finished 36.2 KB download -69% 
worldcup_10stones.png 24.8 KB finished 8.4KB download -66% 
worldcup_25stones.png 25.0 KB finished 8.5 KB download -66% 
worldcup_ball.png 17.3 KB finished 5.6 KB download -68% 
worldcup_mainbg.png 508.0 KB finished 108.0 KB download -79% 
worldcup_shadow.png 3.8 KB finished 494B download -87% 
worldcup_share.png 11.7 KB finished 3.9 KB download -67% 


图 11-13 ”压缩 信息 


说 明 关于 压 图 技术 ， 还 有 很 多 解决 方案 ，TinyPNG 只 是 其 中 的 一 种 。TinyPNG 有 PhotoShop 插 
件 ， 读 者 可 自行 通过 Google 或 百度 查看 。 


11.5 ”小结 


通过 本 章 的 学 习 , 我 们 知道 一 些 “ 高 频 活 跃 ”对 象 可 放 人 对象 缓冲 池 中 以 便 以 后 可 以 重复 利 
用 , 这 是 在 对 象 上 的 优化 。 而 在 演 染 方面 ，OpenGL/WebGL 和 Canvas 上 都 存在 一 套 自己 的 优化 方 
案 。 在 OpenGL/WebGL 中 ， 存 在 一 种 批 处 理 泻 染 的 概念 ， 主 要 是 采用 同一 张 纹 理 , 优 化 了 每 次 切 
换 纹理 所 带 来 的 性 能 开销 , 引擎 中 一 些 类 也 都 采用 批 处 理 泻 染 , 例如 粒子 系统 、TiledMap 地 图 等 。 
而 在 Canvas 上 ， 同 样 存在 一 种 称 为 预 烘 培 的 泻 染 优化 方案 , 它 主 要 用 来 将 不 活跃 的 节点 都 烘 培 到 
一 个 层 上 ， 然 后 一 次 性 直接 绘制 。 另 外 ， 在 资源 管理 方面 ， 我 们 可 以 通过 SpriteSheet 的 方式 ， 进 
行 资源 的 合理 管理 以 及 内 存 优 化 等 SpriteSheet 采 用 TexturePacker 跨 平台 软件 制作 , TexturePacker 
也 可 以 为 我 们 加 密 图 片 资 源 。 最 后 ,我 们 的 图 片 资源 还 可 以 通过 TinyPNG 图 片 压 缩 云 应 用 进行 压 
缩 。 其 压缩 比例 约 70%， 但 是 会 降低 图 片 的 质量 ,需要 我 们 在 质量 和 资源 大 小 之 间 权 衡 , 但 不 管 
如 何 ， 这 样 的 压缩 比例 在 HTML5 上 极 具 有 诱惑 力 。 


游戏 地 


在 一 些 战 略 类 的 游戏 中 , 游戏 背景 地 图 通常 会 超出 手机 屏幕 大 小 , 并 有 旦 背景 地 图 上 的 很 多 元 
素 都 具有 极 高 的 重复 性 ， 若 使 用 传统 的 方式 ,对 于 每 一 张 背景 地 图 ， 都 让 美术 画 一 张 图 片 ， 然 后 
把 这 些 图 片 加 载 到 内 存 中 , 最 后 通过 代码 拼接 起 来 ,这 样 做 的 方式 慌 伯 不 太 好 。 因 为 它 不 仅 会 加 
大 美术 的 工作 量 、 游 戏 安装 包 的 大 小 、CPU 的 使 用 率 、 内 存 的 占有 率 等 ， 而 且 过 高 的 内 存 开销 还 
可 能 造成 内 存 不 足 ， 引 起 程序 朋 溃 。 另 外 ,这 还 极 大 降低 了 工作 流 的 灵活 性 ， 使 得 后 期 背景 地 图 
需求 改动 时 ， 美术 、 程 序 这 一 条 链 一 起 改动 ， 这 无 疑 加 大 了 项 目的 开发 成 本 。 

所 以 ,秉承 着 复 用 、 高 效 、 灵 活 的 优化 思想 ,我 们 可 以 考虑 使 用 瓦 片 地 图 来 解决 和 避免 这 一 
系列 的 问题 。 

本 章 内 容 : 
口 瓦 片 地 图 原理 
口 Tiled Map Editor 简 介 
口 Tiled Map Editor 工 作 区 介绍 
口 使 用 Tiled Map Editor 制 作 一 个 地 图 


12.1 瓦 片 地 图 原理 


瓦 片 地 图 的 原理 是 把 图 片 中 的 元 素 进行 单位 化 , 将 大 图 片 拆 成 一 张 张 小 图 块 , 然后 通过 组 合 
拼接 的 方式 , 重新 拼 出 整个 地 图 。 其 流程 为 : 项 目 定好 游戏 中 瓦 片 的 大 小 ,然后 美术 绘制 瓦 片 并 
制作 成 瓦 片 图 集 , 再 由 策划 或 美术 根据 项 目 需求 通过 瓦 片 地 图 编辑 器 制作 出 瓦 片 地 图 , 最 后 将 生 
成 的 地 图 数据 文件 和 瓦 片 图 集 交 予 程序 处 理 即 可 。 

图 12-1 为 美术 制作 好 的 瓦 片 图 集 ， 看 上 去 似乎 每 个 瓦 片 之 间 没 有 任何 的 关系 ,然而 可 以 通过 
瓦 片 地 图 编辑 器 将 其 编辑 为 图 12-2 的 样子 ,这 时 候 ， 它 看 上 去 是 不 是 就 是 一 张 有 模 有 样 的 游戏 地 
图 了 ? 
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图 12-1 瓦 片 图 集 图 12-2 正在 编辑 中 的 瓦 片 地 图 


12.2 Tiled Map Editor 简介 


在 开发 中 , 我 们 采用 Tiled Map Editor 编 辑 器 快速 编辑 游戏 地 图 ， 它 是 一 款 开源 的 瓦 片 地 图 编 
辑 器 ,采用 QT 编写 ， 拥 有 跨 平台 特性 ， 所 以 它 能 够 很 好 地 运行 在 Mac OS X、Windows 以 及 Linux 
桌面 操作 系统 上 ， 其 下 载 地 址 为 : http://www.mapeditor.org。 

Tiled Map Editor 编 辑 器 生成 的 地 图 文件 是 一 个 XML 配置 文件 ， 其 文件 后 缀 名 为 .tmx。 
Cocos2d-JS 友 好 地 支持 了 由 Tiled Map Editor 制 作 并 保存 为 TMX 格 式 的 地 图 文件 。Tiled Map Editor 
的 界面 图 如 图 12-3 所 示 。 


©e@e untitled.tmx 


aa、 国 虽 人 ee 音 


可 醒 块 层 1 
[ 广 全 及 天国 ; 电 
过 你 地 图 “对象 着 Sa 
ee 图 块 
ER 
地 形 


75% 


当前 层 : 块 层 1 


图 12-3 ”Tiled Map Editor 界面 图 


说 明 因为 Tiled Map Editor 具 有 跨 平 台 特 性 ， 所 以 Tiled Map Editor 在 其 他 操作 系统 中 的 页 面 布 
局 、 使 用 方式 等 几乎 一 致 ， 本 章 采 用 Mac OS X 版 的 Tiled Map Editor 讲 解 。 
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12.3 Tiled Map Editor 工作 区 介绍 


我 试 着 将 Tiled Map Editor 的 工作 区 分 为 4 个 部 分 ， 分 别 是 : 顶部 工具 栏 ， 中 间 地 图 编辑 区 ， 
右上 方 迷你 地 图 、 对 象 、 图 层 区 , 右 下 方 地 形 和 图 块 区 。 你 可 以 先 了 解 这 些 工 作 分 区 大 概 的 作用 ， 
最 后 跟随 本 章 实例 进行 实战 。 


12.3.1 工具 栏 

如 图 12-4 所 示 ， 顶 部 工具 栏 除了 提供 新 建 、 打 开 、 保 存 等 这 些 最 基础 的 功能 按钮 外 ， 还 提供 
了 一 些 快捷 操作 的 按钮 ,例如 图 章 刷 、 地 形 刷 、 填 充 、 橡 皮 、 区 域 选 择 、 魔 棒 工 具 等 ,这 些 工具 
使 用 极其 简单 ， 擅 用 它们 ， 会 给 我 们 带 来 更 快 、 更 方便 的 地 图 编辑 体验 。 

紧 随 其 后 的 则 是 一 些 形状 插入 等 功能 ， 例 如 和 矩形 、 圆 形 等 ,它们 被 用 在 对 象 层 上 ,一般 用 来 
设计 关卡 等 。 


untitled.tmx 
Te 罗 , 轨 i 时 om: 国 sAr9Hesak 加 疙 


图 12-4 ”Tiled Map Editor 顶 部 工具 栏 


12.3.2 ”地 图 编辑 区 


顾名思义 ,地 图 编辑 区 即 瓦 片 地 图 编辑 的 地 方 。 如 图 12-5 所 示 ， 你 可 以 在 这 里 制作 出 你 想 要 
的 地 图 。 例 如 ， 可 以 选中 工具 栏 中 的 图 章 刷 ， 然 后 在 图 块 ( 见 12.3.4 节 ) 中 选 一 图 块 ， 即 可 在 地 
图 编辑 区 中 刷 出 一 块 瓦 片 , 接着 通过 按 住 鼠 标 左 键 后 拖 中 鼠标 的 方式 , 图 章 刷 即 可 像 刷 子 一 样 在 
地 图 编辑 区 域 刷 出 大 量 的 瓦 片 。 男 外 ,值得 注意 的 是 ， 当 刷 瓦 片 时 ， 记 得 在 图 层 ( 见 12.3.3 广 ) 
中 选择 你 想 要 编辑 的 图 层 。 


图 12-5 ”Tiled Map Editor 地 图 编辑 区 
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12.3.3 ”迷你 地 图 、 对 象 、 图 层 区 
在 迷你 地 图 中 ,你 可 以 像 放大 镜 那 样 去 


kxJa 迷你 地 图 


观察 你 的 瓦 片 地 图 的 细节 ， 这 在 一 定 程 度 上 
也 可 以 快速 帮 你 定位 到 想 看 到 的 区 域 ， 如 图 
12-6 所 示 。 


对 象 层 实际 上 是 一 个 对 象 数组 ， 每 个 对 
象 本 身 具 有 位 置 、 大 小 等 属性 ， 如 图 12-7 所 
示 , 它 被 大 量 应 用 在 游戏 关卡 、 人 物 移动 路 
径 、 游 戏 道具 、 金 币 、 障 但 物 等 这 类 具有 标 
记性 功能 的 设 定 上 。 例如, 塔 防 游戏 中 怪物 
行走 的 路 线 ，, 跑 栈 游戏 中 路 上 的 花样 金币 组 
等 。 对象 组 中 的 对 象 在 TMX 文 件 中 以 键 值 对 
的 形式 存在 , 你 可 以 利用 这 个 功能 给 对 象 定 
义 一 些 属性 ,然后 在 代码 中 获取 出 来 ， 如 此 
便 完成 了 一 个 简单 的 数据 配置 功能 。 


概 王 下 有 蚌 对 象 图 层 


图 12-6 ”Tiled Map Editor 迷 你 地 图 


图 层 即 为 瓦 片 层 , 每 一 块 瓦 片 都 被 放 到 这 个 图 层 中 ,一 个 地 图 文件 中 可 以 有 多 个 图 层 ， 如 图 
12-8 所 示 。 在 Cocos2d-JS 中 ,图 层 用 cc .TMXLayer 类 表示 ,cc .TMXLayer 继 承 自 cc. SpriteBatchNode， 
每 个 图 层 使 用 一 张 cc .TextureAt1las 来 演 染 瓦 片 ， 也 就 是 美工 做 的 瓦 片 集 ， 多 个 图 层 可 以 共用 
一 张 瓦 片 集 ， 但 是 一 个 图 层 不 可 以 用 多 张 瓦 片 集 。 


x15) 对 象 
名 称 类 型 
v 名 hero_road 


EC FT 


point 1 


point_2 
point_3 
趾 避 六 粤 风 i 
迷你 地 图 图 层 


[xs 属性 
Property 值 

ID 31 
名 称 point 0 
类 型 
Visible 
X 95.21 
Y 93.95 
Width 0.00 
Height 0.00 
Rotation | 0.00 


过 


图 12-7 Tiled Map Editor 对 象 面 板 以 及 属性 面板 


应 人 金 量 故国 己 


迷你 地 图 。 对 象 
图 12-8 Tiled Map Editor 图 层面 板 
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虽然 TMX 文 件 中 图 层 的 数量 没有 设 定 上 限 ， 但 我 们 应 该 合理 地 规划 好 每 一 个 图 层 ， 因 为 每 
个 图 层 仅 支 持 一 张 瓦 片 集 ( 瓦 片 素材 组 )。 另 外 ， 每 一 个 瓦 片 用 cc .sprite 表 示 ， 这 使 得 我 们 的 
瓦 片 可 以 通过 cc . sprite 类 完善 的 API 进 行 旋转 、 缩 放 、 移 动 等 操作 。 


12.3.4 图 块 、 地 形 区 


图 块 区 即 为 瓦 片 的 模具 列表 , 每 一 个 图 块 都 有 一 个 全 局 标识 ( GID, Global IDentifier 的 缩写 )， 
一 般 我 们 称 它 为 瓦 片 DD。 瓦 片 D 从 1 开始 ， 起 点 为 地 图 的 左上 角 ， 水 平 向 右 递增 ,到 达 当 前 行 末 
尾 之 后 自动 换行 继续 递增 , 如 图 12-9 所 示 。 另 外 , 建议 每 个 图 块 的 地 图 素材 大 小 为 32 x 32 的 倍数 。 


a9 图 志 
TiledMap 
i 


记忆 区 国 图 二 一 80% 


图 12-9 GID 


注意 在 Tiled Map Editor 编 辑 器 中 ，GID 从 0 开始 ， 但 是 在 Cocos2d-JS 中 ， 所 有 的 GID 会 被 执行 
+1 操 作 ， 因 为 0 用 来 表示 当前 位 置 没有 瓦 片 。 


12.3.5 ”Cocos2d-JS 支持 的 地 图 类 型 


Cocos2d-JS 支 持 的 地 图 类 型 有 : 直角 乌 膨 地 图 
( 90° 地 图 )、 等 距 斜 视 地 图 ( 和 斜 45" 地 图 ) 和 正六 边 形 J x 
地 图 ， 不 支持 左右 或 上 下 边界 的 六 边 形 地 图 。 六 芝 的 芝 
直角 鸟 攀 地 图 和 正六 边 形 地 图 以 垂直 地 图 平面 
的 方向 进行 展示 ， 如 图 12-10 和 图 12-11 所 示 ， 它们 是 
我 们 经 常 看 到 的 一 种 地 图 。 等 距 斜 视 地 图 是 以 倾斜 地 
图 平面 45°* 的 视角 进行 展示 的 ， 如 图 12-12 所 示 。 图 12-10 直角 乌 梧 地 图 


TMX resize test 
not crash, Testing issue #740 


op) (Ds 
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图 12-11 正六 边 形 地 网 图 12-12 ”等 距 和 斜视 地 图 


12.3.6 ” 瓦 片 地 图 坐标 系 


在 瓦 片 地 图 中 ， 左 上 角 为 瓦 片 地 图 坐标 系 的 原点 ， 水 平 向 右 表示 X 轴 ， 垂 直 向 下 表示 Y 轴 ， 
每 一 个 瓦 片 表示 一 个 坐标 单位 。 例 如 ， 在 一 个 30 行 40 列 的 瓦 片 地 图 中 ， 上 坐标 (1, 2) 表 示 第 2 列 第 3 


行 的 那个 瓦 片 。 图 12-13 和 图 12-14 分 别 为 直角 乌 攀 地 图 和 等 距 和 斜视 地 图 的 坐标 系统 示意 图 。 
二 
(0, 0) 
(3,2) 
Y 
YY 
图 12-13 ”直角 乌 敬 地 图 的 坐标 系统 图 12-14 ”等 距 斜 视 地 图 的 坐标 系统 


12.4 ”使 用 Tiled Map Editor 制作 一 个 地 图 


在 上 一 节 中 ,你 了 解 了 Tiled Map Editor 的 工作 区 ,那么 在 本 节 中 ,我 将 和 你 一 起 使 用 Tiled Map 
Editor 制 作 一 个 瓦 片 地 图 ， 完 成 后 的 效果 图 如 12-15 所 示 。 


口 
下 ee @ 本 


他 


12-15 ”Tiled Map Editor 制 作 的 地 图 
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12.4.1 新建 地 图 


打开 Tiled Map Editor 编 辑 器 ， 点 击 菜单 栏 中 的 “文件 ”一 “新 建 ”来 创建 一 个 新 地 图 文件 ， 
将 地 图 大 小 设置 为 15 x 10 、 块 大 小 设置 为 64 x 64， 如 图 12-16 所 示 ， 然 后 将 创建 的 地 图 文件 命名 
并 保存 ， 例 如 我 把 它 命名 为 TileMap。 
© 新 地 图 
地 图 
地 图 方向 : 正常 加 
Tile layer format: ”Base64 (无 压缩 ) 天 
Tile render order: Left Down 3 
地 图 大 小 块 大 小 
宽度 : |15 块 宽度 : 64 像素 点 
高 度 : 10 块 高 度 : 64 像素 点 
960 x 640 像素 点 
Cancel | 
图 12-16 新建 地 图 
12.4.2 ”新 建 图 块 
接着 , 点击 图 块 面板 中 的 “新 图 块 ”按钮 ,将 随 书 资源 JSBook/res/unit12_tiledMap/TiledMap.png 
导入 到 图 块 中 ,或 者 也 可 以 直接 将 TiledMap.png 图 片 拖 到 图 块 面板 中 ， 再 把 块 的 宽度 和 高 度 都 设 
定 为 64， 边 距 都 设置 为 2， 如 图 12-17 所 示 。 
@e@ 新 图 块 
图 二 
名 称 : |TiledMap 


类 型 : Based on Tileset Image 日 


图 像 

Source: 12 tiledMap/TiledMap.png 浏览 .… 
设置 透明 度 : 转 

块 宽度 : 64 像素 点 2 ， 边 距 : 2 像素 点 


块 高 度 : 64 像素 点 7? 间距: 2 像素 点 


cancl | 全 


图 12-17 新 图 块 


这 里 将 新 图 块 中 的 块 宽度 和 高 度 都 设置 为 4， 并 不 是 因为 之 前 瓦 片 地 图 的 大 小 设 定 (如 
12-15 所 示 )， 而 是 因为 TiledMap.png ( 如 图 12-18 所 示 ) 瓦 片 图 集中 块 的 大 小 为 64 x 64。 
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另外 ， 美 术 还 设 定 了 这 张 图 集中 每 个 瓦 片 之 间 的 边 距 为 2 个 像素 ， 她 这 么 设计 是 为 了 隔 开 每 
个 瓦 片 ， 使 得 图 集中 的 瓦 片 排列 整齐 ， 清 晰 可 见 ， 不 会 挤 到 一 块 儿 去 。 但 是 ,这 仅仅 是 美术 排版 
用 的 。 在 程序 中 ， 我 们 并 不 希望 瓦 片 之 间 有 边 距 ， 这 可 以 在 新 建 图 块 的 时 候 将 这 个 边 距 去 掉 。 


12-18 TiledMap.png 


12.4.3 “新建 层 
从 图 12-15 中 可 以 看 出 ， 我 们 要 制作 的 地 图 有 3 个 层 ， 分 别 是 背景 层 、 障 碍 物 层 以 及 对 象 层 。 
点 击 图 层面 板 中 的 “新 图 层 ” 按 钮 , 创建 出 两 个 普通 层 和 一 个 对 象 , 并 对 其 命名 , 如 图 12-19 所 示 。 


(x15) 图 层 
透明 度 : 


团 这 hero_road 
睹 obstacle 


县 全 最 加 国 ; 己 


添加 图 层 上 对象 | 图 层 ] 
人 添加 对 象 民 。。 上 
| 增加 图 像 图 层 


图 12-19 ”创建 图 层 


12.4.4 ”编辑 地 图 


前 面 提 到 过 ，Tiled Map Editor 工 具 栏 中 有 个 填充 工具 ， 它 可 以 用 来 填充 层 中 的 空白 区 域 , 这 
对 编辑 大 量 重复 的 瓦 片 地 图 非常 有 用 。 所 以 ， 我 们 可 以 使 用 它 来 编辑 背景 层 ， 有 具体 操作 如 下 。 


(1) 在 TiledMap 图 块 中 选择 背景 用 的 图 块 。 
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(2) 在 图 层 中 选中 bg 层 。 
(3) 在 工具 栏 中 选择 填充 工具 。 
(4) 在 地 图 编辑 需 区 域 中 点 击 一 下 鼠标 。 


通过 上 面 的 步骤， 就 可 以 秒 刷 出 背景 层 。 接 下 来 ， 通 过 工具 栏 中 的 图 章 刷 工具 ， 并 选择 
TiledMap 图 块 中 对 应 的 图 块 ， 然 后 在 obstacle 层 中 编辑 出 如 图 12-15 所 示 的 样式 即 可 。 


最 后 ， 选 中 hero_road 对 象 层 ， 然 后 选择 工具 栏 的 和 矩形， 可 在 地 图 中 标记 出 一 些 “ 标 记 ”， 这 
些 “ 标 记 ” 可 以 用 来 点 缀 出 一 些 图 案 , 例如 用 300 个 “标记 ” 夯 出 一 个 爱心 形状 。 此 外 ， 这些 “ 标 
记 ” 也 可 以 用 来 标记 出 怪物 的 移动 路 径 等 ， 就 像 图 12-15 那 样 。 


此 时 你 可 能 会 考虑 一 个 问题 : 之 前 的 图 集中 只 有 地 板 和 植物 ， 如果 想 要 在 这 个 地 图 中 添加 一 
只 乌鸦 ， 应 该 怎么 做 呢 ? 做 法 有 两 种 ， 其 一 ， 让 美术 修改 之 前 的 瓦 片 图 集 ， 然 后 重新 编辑 地 图 ， 
这 无 疑 是 一 种 非常 笨拙 的 方法 。 甚 二, 在 美术 资源 准备 阶段 ， 就 将 瓦 片 图 集 单 元 化 ， 分 为 背景 瓦 
片 图 集 、 障 碍 物 瓦 片 图 集 、 乌 类 等 瓦 片 图 集 。 这 样 ， 后 面 再 有 新 类 型 的 瓦 片 需要 添加 到 地 图 中 的 
时 候 , 只 需 将 对 应 的 瓦 片 图 集 添加 到 瓦 块 面板 中 ,然后 再 新 建 一 个 新 的 层 , 例如 将 这 个 层 命 名 为 
animal ， 接 着 便 可 以 在 animal 层 中 刷 出 几 只 乌鸦 ， 如 图 12-20 所 示 。 这 样 做 的 方式 更 为 灵活 ,但 是 
也 不 可 滥用 。 另 外 ， 切 记 一 个 图 层 只 能 使 用 一 张 瓦 片 图 集 。 


ee 图 块 
TiledMap | map | 本 


EWE > 30% 国 


图 12-20 ”添加 动物 


到 此 , 一 个 瓦 片 地 图 就 已 经 制作 完成 了 ， 此 时 会 得 到 一 个 .tmx 地 图 信息 文件 以 及 美术 事先 准 
备 好 的 瓦 片 集 图 片 ， 如 图 12-21 所 示 。 


map.png 
TiledMap.png 
TiledMap.tmx 


i | 回国 


图 12-21 编辑 好 的 瓦 片 地 图 文件 
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12.5 “在 Cocos2d-JS 中 使 用 瓦 片 地 图 


在 引擎 中 》 瓦 片 地 图 相关 的 类 主要 有 cc . TMXTiledMap、cc. TMXLayer 和 和 cc .TMXObject 
Group 这 3 个 类 。 CC .TMXTIi leqMap 用 来 创建 一 个 瓦 片 地 图 CR LG TMXLayetz 表 示 瓦 片 地 图 中 的 层 ， 
而 cc .TMXObjectGroup 则 用 来 管理 对 象 层 数 据 。 


12.5.1 cc .TMXTiledMap 地 图 对 象 


用 Tiled Map Editor 编 辑 器 编辑 完 地 图 之 后 ， 生 成 一 个 .tmx 地 图 文件 ， 将 此 文件 作为 
cc .TMXTiledMap 构 造 函 数 的 参数 ， 即 可 创建 出 一 个 瓦 片 地 图 ， 代码 如 下 : 


1 loadTiledMap : function()f{ 

避 var node = new cc.TMXTiledMap ("res/unit12 tiledMap/TiledMap .tmx"); 
3 this.addChild (node); 

4 node.setPosition((cc.winSize.width - node.width) / 2, 0); 

3 


} 
实际 上 ，cc .TMXTi1edMap 构 造 函 数 接收 两 个 参数 ， 第 一 个 是 .tmx 地 图 信息 文件 ， 第 二 个 是 
地 图 的 瓦 片 图 集 ， 但 是 这 个 参数 是 可 省 略 的 ， 因 为 .tmx 文 件 里 面 已 经 附带 了 瓦 片 图 集 的 名 称 。 
另外 ，cc .TMXTiledMap 的 锚 点 为 cc.p(0，0)， 所 以 第 3 行 代码 是 将 瓦 片 地 图 的 坐标 设置 
为 屏幕 的 中 心 。 
当 瓦 片 地 图 添加 完毕 之 后 ， 你 可 以 通过 如 表 12-1 所 示 的 相关 API 获 取出 层 。 


表 12-1 cc .TMXTiledMap 获 取出 层 的 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 
CC .TMXLayet String getLayer (layerName) 根据 名 字 获 取 指 定 层 
cc .TMXObjectGroup String getObjectGroup (groupName) 根据 名 字 获 取 指 定 对 象 层 
Array 无 al1Dayers () 获取 所 有 的 层 
Array 无 getObjectGroups () 获取 所 有 对 象 组 
无 Array setObjectGroups (groups) 设置 对 象 组 


getObjectGroup (groupName) 的 返回 对 象 中 存放 了 我 们 之 前 的 路 径 标 记 ， 这 需要 遍历 
cc.TMXObjectGroup 对 象 中 所 有 的 对 象 , 把 相应 的 数据 值 取出 , 然后 来 保存 在 数组 中 , 代码 如 下 : 


1 loadTiledMap : function()f{ 

2 var node = new cc.TMXTiledMap ("res/unit12 tiledMap/TiledMap .tmx"); 
3 this.addChild (node); 

4 node.setPosition( (cc.winSize.width - node.width) / 2, 0); 

5 

6 var road = node.getObjectGroup ("hero_ road"); 

时 var objs = road.getObjects(); 

8 Var roadx = null; 

9 Var pointArray = []; 

10 for (var i = 0; i < objs.length; i++) { 

11 roadxX = objs[i].x + (cc.winSize.width - node.width) / 2; 
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2 pointArray .push(cc.p(roadx, objs[i].y)); 


第 10 行 到 第 13 行 代码 用 于 将 对 象 组 中 的 点 坐标 获取 出 来 ， 并 保存 在 bointArray 数 组 中 。 你 
可 以 看 到 , 在 第 11 行 代码 中 , 我 对 每 个 “标记 ”的 X 轴 坐标 进行 了 调整 ， 这 是 因为 在 屏幕 适 配 时 ， 
我 选择 了 FIXED_HEIGHT 模式 作为 分 辨 率 适 配 模 式 , 它 会 纵向 放大 地 图 以 适应 屏幕 的 高 度 , 横向 
按 原始 宽 高 比 放 大 。 所 以 ， 这 里 需要 修正 “标记 ”X 轴 的 坐标 ， 其 做 法 为 加 上 地 图 的 偏 移 量 ， 原 
理 如 图 12-22 所 示 。 


偏 移 量 


地 图 内 容 


(0, 0) 


图 12-22 ”对 象 数据 偏 移 量 
此 外 ，cc .TMXTiledMap 还 提供 了 相关 大 小 以 及 方向 的 相关 API， 如 表 12-2 所 示 。 


表 12-2 cc .TMxXTiledMap 大 小 、 方 向 相关 的 API 


返回 值 类 型 ”参数 类 型 函 数 说 明 
cc.Size 无 getMapSize() 获取 以 瓦 片 数量 为 单位 的 地 图 大 小 
无 cc.Size setMapSize (size) 设置 以 瓦 片 数量 为 单位 的 地 图 大 小 
cc.Size 无 getTileSize!() 获取 瓦 片 大 小 
无 cc.Size setTileSize(size) 设置 瓦 片 大 小 
Number 无 getMapOrientation() 获取 地 图 方向 
无 Number setMapOrientation (orientation) 设置 地 图 方向 


需要 注意 的 是 , 这 里 的 大 小 和 节点 的 尺寸 不 大 一 样 。 假设 我 们 的 地 图 是 10 行 15 列 的 ， 每 块 瓦 
片 的 边 长 是 64 个 像素 ,那么 调用 getMapsize() 后 , 得 到 的 结果 就 是 (15,10)。 可 见 ， 地 图 的 大 小 
是 以 瓦 片 数量 为 单位 的 。 

再 者 ， 瓦 片 地 图 的 瓦 片 是 cc .Sprite 类 型 的 对 象 ， 所 以 瓦 片 的 尺寸 就 是 精灵 节点 的 大 小 。 前 

面 假设 瓦 片 变 成 64 个 像素 ,那么 调用 getTilesize() 函数 后 ,得 到 的 结果 就 是 cc.size(64，64) 。 
另外 ， 瓦 片 地 图 方向 的 可 取 值 如 下 。 

口 cc.mMX_ORIENTATION_ORTHO : 直角 鸟 梧 地 图 (90° 地 图 )。 

口 cc .TMX_ORIENTRATION_HEX:， 正 六 边 形 地 图 。 
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口 cc .TMX_ORIENTATION_ISo : 等 距 斜 视 地 图 ( 斜 4$" 地 图 )。 
在 瓦 片 地 图 中 ， 几 乎 所 有 相关 的 对 象 都 可 以 携带 一 些 自 定 义 的 属性 信息 。 关 于 属性 ， 


cc.TMXTiledMap 提 供 如 表 12-3 所 示 的 相关 API。 


表 12-3 ”cc .TMXTiledMap 属 性 操作 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 
Object 无 getProperties () 获取 属性 
无 Object setProperties (properties) 设置 属性 
String String getProperty (propertyName) 通过 属性 名 获取 对 应 的 属性 
Object Number getPropertiesForGID (gid) 通过 指定 GID 查 找 其 对 应 的 属性 


12.5.2 cc .TMXLayer 图 层 对 象 


cc.TMXLayer 继 承 自 cc.SpriteBatchNode， 它 是 每 个 瓦 片 的 父 节点 。 瓦 片 集 使 用 
(ero TextureAtlas 演 染 ， 如 果 你 在 运行 时 直接 或 者 间接 地 修改 了 瓦 片 的 属性 ， 那么 这 个 瓦 片 将 
变 成 一 个 cc. sprite， 例 如 运行 一 个 属性 变化 动作 。 默 认 情 况 下 ， 不 会 有 cc . Sprite 对 象 被 创 
建 。 不 过 ， 使 瓦 片 变 为 cc .Sprite 节 点 ， 便 可 以 享受 cc.Sprite 丰 富 的 API。 


cc .TMXLayer 最 大 的 作用 就 是 用 来 管理 地 图 中 的 瓦 片 ， 它 提供 了 一 些 管理 瓦 片 的 API， 如 表 
12-4 所 示 。 


表 12-4 ”cc .TMXLayer 管 理 瓦 片 的 相关 API 


返回 值 类 型 参数 类 型 函 数 说 明 

cc.Sprite cc.Point | Number getTileAt (pos, y) 通过 坐标 获取 对 应 的 瓦 片 
umber 

Number cc.Point | Number getTileGIDAt (pos, y) 通过 给 定 的 瓦 片 坐标 返回 瓦 
umber 片 GID 

Number cc.Point | Number getTileFlagsAt (pos, y) 通过 给 定 的 瓦 片 坐标 返回 瓦 
Se 片 标记 

无 umber cc.Point | Number setTileGID(gid, posOrx, 设置 瓦 片 的 GID 
umber flagsOorY, flags) 
umber 

无 cc.Point | Number removeTileAt (pos, y) 删除 指定 坐标 上 的 瓦 片 
umber 

CCE. Poln cc.Point | Number getPositionAt (pos, y) 获取 指定 坐标 位 置 (以 点 为 
We 单位 ) 的 瓦 片 坐标 

Array 无 getTiles () 获取 所 有 瓦 片 

无 Array setTiles (tiles) 设置 所 有 瓦 片 

cc.TMXTilesetInfto 无 getTileset () 获取 层 的 瓦 片 设置 信息 

无 cc.TMXTilesetInfo setTileset (info) 设置 层 的 瓦 片 设置 信息 


如 果 你 要 隐藏 obstacle 层 中 位 置 为 2, 4) 的 瓦 片 ， 那 么 应 该 将 指定 位 置 的 瓦 片 获取 出 来 ， 然 后 


设置 它 的 不 可 见 属 1 


加 


性， 代码 如 下 : 
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1 loadTiledMap : function(){ 

2 var node = new cc.TMxXxTiledMap ("res/unit12 tiledMap/TiledMap.tmx"); 
3 Pf 

4 var layer = node.getLayer ("obstacle"); 

5 Var tile = layer.getTileAt (2, 4); 

6 tile.setVisible(false); 

加 -本 


上 面 的 代码 看 上 去 似乎 并 没有 什么 问题 , 但 实际 上 它 是 不 安全 的 , 例如 当 位 置 (2， 


4) 上 没有 瓦 


片 的 时 候 ， 就 会 报错 。 所 以 ， 若 想 要 获取 出 一 个 瓦 片 的 时 候 ， 应 该 先 调用 getTileGIDAL (pos ， 
y) 函数 ， 判 断 当前 位 置 是 否 有 瓦 片 后 再 进行 逻辑 处 理 。 要 判断 当前 位 置 是 否 有 瓦 片 ， 可 通过 


getTileGIDAt (pos，y) 图 数 的 返回 值 进行 辨别 ， 如 果 返 回 的 GID 大 于 0， 则 表示 当 
瓦 片 存在 ， 反 之 则 没有 ， 代 码 如 下 : 


1 loadTiledMap : function(){ 


前 位 置 上 有 


光 Var node = new cc.TMxTiledMap ("res/unit12 tiledMap/TiledMap.tmx"); 
3 /2 

4 Var layer = node.getLayer ("obstacle"); 

5 // 判断 当前 位 置 是 否 有 瓦 片 

6 if (layer.getTileGIDAt (2, 4) > 0) { 

可 var tile = layer.getTileAt (2, 4); 

8 tile.setVisible(false); 

9 } 

10 } 


男 外 ，getPositionAt (pos，y) 图 数 可 以 返回 指定 位 置 以 点 为 单位 的 屏 屏幕 坐标 ， 也 可 以 理 


解 为 瓦 片 地 图 坐标 转 为 Cocos2d-JS 标 准 坐标 。 


而 getTileset () 函数 可 以 返 回 当 前 层 的 一 些 信 息 ， 例如 边 力 中 、 瓦 片 图 集 的 名 字 等 。 


此 外 ，cc.TMXLayer 还 提供 了 一 些 大 小 、 方 向 、 名 字 等 相关 的 API ， 
cc.TMXTiledMapb 几 乎 是 一 致 的 ， 了 解 一 下 即 可 ， 具 体 如 表 12-5 所 示 。 


表 12-5 cc .TMXLayer 大 小 、 方 向 、 名 字 等 相关 的 API 


这 些 API 和 


返回 值 类 型 参数 类 型 函 数 说 明 
cc.Size 无 getLayerSize() 获取 层 的 大 小 
无 cc.Size setLayerSize (size) 设置 层 的 大 小 
cc.Size 无 getMapTileSize() 获取 瓦 片 的 大 小 
无 (el aid setMapTileSize(size) 设置 瓦 片 的 大 小 
Object 无 getProperties () 获取 属性 
无 Object setProperties (properties) 设置 属性 
Number 无 getLayerOrientation() 获取 层 的 方 应 ( 司 地 图 方向 ) 
无 Number setLayerOrientation(orientation) 设置 层 的 方向 ( 同 地 图 方向 ) 
String String getProperty (propertyName) 通过 属性 名 获取 对 应 的 属性 
String 无 getLayerName () 获取 层 的 名 字 
无 String setLayerName (layerName) 设置 层 的 名 字 
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12.5.3 ”cc .TMXObjectGroup 对 象 组 
对 象 组 也 称 为 对 象 层 ， 这 是 因为 Tiled Map Editor 编 辑 器 将 对 象 组 也 放 在 图 层 当 中 ， 而 
Cocos2d-JS 的 API 又 将 其 称 为 组 。 


对 象 组 中 的 对 象 不 是 场景 中 的 节点 ,而 是 标记 在 当前 地 图 层 上 的 一 些 数据 集合 而 已 。 标 记 有 
坐标 属性 ， 也 可 以 有 自 定 义 属性 ， 它 们 组 合 在 一 起 ， 就 可 以 满足 多 种 数据 配置 的 需求 。 


cc.TMXOobjectGroup 的 API 并 不 多 ， 如 表 12-6 所 示 。 


表 12-6 ”cc .TMXObjectGroup 常 用 API 


返回 值 类 型 参数 类 型 函 数 说 明 
Number 无 getPositionOffset () 获取 子 对 象 的 偏 移 位 置 
无 Number SetPositionoffset (offset) 设置 子 对 象 的 偏 移 位 置 
Object 无 getProperties () 获取 存储 在 数组 中 的 属性 队列 
无 Object SetProperties (properties) 设置 存储 在 数组 中 的 属性 队列 
String 无 getGroupName () 获取 组 名 称 
无 String setGroupName (groupName) 设置 组 名 称 
Object String propertyNamed (propertyName) 通过 属性 名 获取 对 应 的 属性 
Object String getObject (objectName) 获取 指定 对 象 名 的 对 象 
Array 无 getObjects () 获取 对 象 数 组 
无 Array setObjects (objects) 设置 对 象 数 组 


需要 说 明 的 是 ， [ele TMXObjectGroup 中 有 一 个 _positionoffset 属 性 ， 用 来 表示 坐标 凯 
移 量 ,， 它 只 是 一 个 简单 的 数据 保存 变量 ， 对 应 的 get 和 set 函数 是 get PositionOoffset() 和 
setPositionOffset (offset)。 所 以 你 可 以 将 之 前 的 代码 改 为 如 下 的 方式 (注意 第 7 行 、 第 
12 行 和 第 13 行 ): 


1 loadTiledMap : function()f{ 

2 var node = new cc.TMXTiledMap ("res/unit12 tiledMap/TiledMap .tmx"); 
3 this.addChild (node); 

4 node.setPosition( (cc.winSize.width - node.width) / 2, 0); 

5 

6 var road = node.getObjectGroup ("hero_ road"); 
road.setPositionoffset (cc.p((cc.winSsize.width - node.width) / 2, 0)); 
8 var objs = road.getObjects(); 

9 Var roadx = null; 

10 Var pointArray = []; 

二 4 for (var i = 0; i < objs.length; i++) { 

12 //roadX=objs[i].x + (cc.winSize.width - node.width) / 2; 

13 roadx = objs[i].x + road.getPositionOffset() .x; 

14 pointArray.push(cc.p(roadxXx , objs[i].y)); 

ES } 
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12.6 小结 


通过 本 章 的 学 习 ， 我们 知道 了 在 Cocos2d-JS 中 游戏 地 图 可 以 通过 瓦 片 地 图 来 解决 。 瓦 片 地 图 
的 原理 是 把 图 片 中 的 元 素 进行 单位 化 ， 将 大 图 片 拆 成 一 张 张 小 图 块 ， 然 后 通过 组 合 拼接 的 方式 ， 
重新 拼 出 整个 地 图 。 此外, 我 们 也 清楚 了 在 开发 中 要 使 用 Tiled Map Editor 编 辑 器 来 制作 瓦 片 地 图 。 
在 Cocos2d-JS 中 ， 与 瓦 片 地 图 有 关 的 3 个 主要 类 是 cc.TMXTiledMap 、cc.TMXLayer 以 及 
cc.TMXObjectGroup。cc.TMXTiledMap 中 存放 着 对 应 的 层 ， 例 如 普通 层 和 对 象 层 (也 称 对 象 
组 )。 善 通 层 一 般 用 来 存放 瓦 片 ， 而 对 象 层 则 存放 一 些 具 有 “标记 性 ”功能 的 数据 ， 例 如 你 可 以 
使 用 它 来 标记 出 怪物 行走 的 道路 、 酪 跑 游戏 中 的 花样 金币 组 等 。 


12.7 参考 资源 


本 章 的 参考 资源 如 下 所 示 。 


DD QT :http://Wwww.qt.i0/。 
口 TMXTiledMap API : http://api.cocos.com/cn/d6/d48/classcocos2d 1 1 tm x tiled map.html。 


反射 调用 

Chipmunk 物理 引擎 
网 络 编程 
JavaScript Binding 


反射 调用 


在 Native 上 ， 可 能 会 获取 移动 设备 的 一 些 信 息 , 例如 获取 手机 系统 版 本 、UUID ( 手机 串 号 )、 
网 络 情况 等 ， 这 些 在 不 同 平台 上 的 实现 方式 是 不 一 样 的 。 在 iOS 中 ， 我 们 可 以 通过 Objective-C 代 
人 码 获取 ; 在 Android 上 ， 我 们 可 以 通过 Java 代 码 实现 。 但 是 ， 我 们 的 逻辑 代码 一 般 都 用 JavaScript 
去 编写 ， 那 如 何在 JavaScript 层 获取 到 移动 设备 的 信息 呢 ? 或 许可 以 通过 Cocos2d-JS 3.x 之 后 提供 
的 反射 调用 机 制 来 实现 。 

本 章 内 容 : 
口 反射 调用 概述 
口 反射 调用 Objective-C 
口 反射 调用 Java 


13.1 反射 调用 概述 


在 Cocos2d-JS 3.0 beta 版 本 中 ,引擎 加 入 了 一 个 新 特性 一 一 反射 调用 。 在 iOS 和 Android 平 台 上 ， 
我 们 可 以 在 JavaScript 中 通过 反射 直接 调用 Objective-C 和 Java 类 中 的 静态 方法 。 但 是 不 管 是 反射 调 
用 Objective-C， 还 是 反射 调用 Java， 其 函数 接口 都 是 一 致 的 ， 代 码 如 下 : 


1 // Objective-C 反 射 调用 接口 
var ret = jsb.reflection.callStaticMethod(className, methodName, argl, arg2, ...); 


2 
3 // Java 反 射 调用 接口 
4 


Var ret = jsb.reflection.callStaticMethod(className, methodName, methodSignature, 
parameters, ...); 


可 以 明显 看 到 ， 虽 然 反 射 调用 Objective-<C 和 反射 调用 Java 的 函数 接口 一 致 ， 但 其 形 参 似 乎 有 
些 不 同 。 这 是 因为 反射 调用 Objective-C 时 ， 只 需 传 人 要 调用 的 类 名 、 方 法 名 、 参 数 即 可 ， 而 在 反 
射 调用 Java 时 ， 我 们 还 需要 对 方法 进行 签名 。 


注意 不 管 是 到 Objective-C 的 反射 ， 还 是 到 Java 的 反射 ， 都 仅 支持 其 类 的 静态 方法 。 
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13.2 反射 调用 Objective-C 


反射 调用 Objective-C 较 为 简单 ， 只 需 传 人 要 调用 的 Objective-C 类 名 、 方 法 名 、 参 数 即 可 。 假 
设 现在 有 一 个 叫 Utils 的 类 ， 它 实现 了 获取 当前 设备 类 型 的 静态 方法 ， 其 代码 如 下 : 


Utils.h 
#import <Foundation/Foundation.h> 
einterface Utils : NSObject 
// 获取 [移动 设备 类 型 ] 
+ (NSString *)getDeviceModel; 
@end 


器 ODP 


Utils.m 
#import "Utils.h" 
@implementation Utils 
+ (NSString *)getDeviceModel { 
NSString *deviceModel = [[UIDevice currentDevice] model]; 
return deviceModel; 
} 
@end 


上 述 代 码 中 的 get DeviceMode1 函 数 获取 了 设备 的 类 型 ， 其 返回 值 可 能 是 iPhone 、iPad 等 。 
在 JavaScript 中 ， 可 以 通过 如 下 代码 反射 调用 utils 类 中 的 getDeviceModel 国 数 : 


~ OODP 


1 if (cc.sys.isNative && cc.sys.og == cc.sys.0S IOS) { 

2 var ret = jsb.reflection.callStaticMethod("Utils", "getDeviceModel"); 
3 cc.log(ret); 

4 ) 


值得 注意 的 是 ， 对 于 上 述 代码 的 条 件 判断 ， 我 们 必须 保证 当前 运行 的 环境 是 iOS 系 统 以 及 在 
Native 上。 这 是 因为 在 iOS 浏 览 器 上 ，cc .sys .os 的 值 也 为 cc .sys.0S_IO0S, 但 此 时 并 非 运 行 在 
JSB 环 境 上 ， 所 以 调用 jsb.reflection.callStaticMethog() 函数 会 报错 。 

男 外 ，jsb.reflection.callStaticMethod() 捕 数 中 的 形 参 以 及 返回 值 都 仪 支持 int、 
floats Bools string 类 型 ， 其 他 类 型 暂 不 支持 。 


说 明 反射 调用 Objective-C 时 ， 参 数 className 为 类 名 即 可 ， 无 需 包含 路 径 。 


13.3 ”反射 调用 Java 


相对 反射 调用 Objective-C 而 言 ， 反 射 调用 Java 显 得 复杂 一 些 ， 一 方面 ， 反 射 调用 Java 中 的 
className 人 参数 必须 是 包含 Java 包 路 径 的 完整 类 名 。 另 一 方面 ， 反 射 调 用 Java 时 必须 对 方法 进行 
签名 。 

如 图 13-1 所 示 ,， 在 org.cocos2qx.javascript 包 中 有 一 个 NativeJavaclass 类 ， 类 中 有 
一 个 返回 值 是 string 类 型 的 静态 方法 getHelloworlda ， 那 么 通过 jsb.reftlection. 
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callStaticMethod(className, methodName, methodSignature, parameters, 


射 调用 getHellowor16 方 法 的 代码 应 该 是 这 样 的 : 


1 // 判断 是 否 是 Android 中 的 Native 环 境 


2 if (cc.sys.isNative && cc.Sys.os == cc.SYS.0S_ANDROID) { 

3 var ret = jsb.reflection.callStaticMethod("org/cocos2dx/javascript/ 
NativeJavaClass", "getHelloWorld", "()Ljava/lang/Sstring;"); 
cc.log("From JBS, Result is :" + ret); 

5: 


..) 反 


其 中 ， className 的 完整 类 名 为 org/cocos2dx/javascript/NativeJavaClass。 值得 注意 
的 是 ， 这 里 是 代码 文件 的 路 径 ， 而 非 Java 中 的 包 名 ， 所 以 采用 的 是 斜 枉 /。getHellowor1d 对 应 
NativeJavaclass 中 的 静态 方法 getHelloworld， 而 () Ljava/lang/String; 为 方法 签名 、 
此 签名 表示 该 反射 调用 函数 没有 参数 ， 但 返回 值 是 String 类 型 。 方 法 签名 是 反射 调用 Java 所 特 


有 的 一 个 参数 ， 其 类 型 是 一 个 字符 串 。 下 面 给 出 了 NativeTavaclass 类 的 定义 : 


1 package org.cocos2dx.javascript; 

2 public class NativeJavaClass { 

3 public static String getHelloWorld()t{ 
4 return "Hello World"; 

5 

6 


} 


可 痊 JSB_Java 
P 到 Android 4.4W 
P 到 Android Dependencies 
了 四 src 
7 出 org.cocos2dx.javascript 
P [DN AppActivity.java 


J NativeJavaClass.java 


Pp 趴 gen [Generated Java Files] 


图 13-1 JSB_Java 工 程 结 构 


方法 签名 的 格式 是 : ( PP)R。P 为 parameter， 表示 和 参数， 支持 0 到 多 个 参数 ，R 为 result， 


表示 返回 值 。 最 简单 的 方法 签名 是 : ( )vVv， 它 表示 一 个 没有 参数 没有 返回 值 的 方法 。 


目前 ，Cocos2d-JS 中 支持 Java 数 据 类 型 的 签名 有 4 种 ， 具 体 见 表 13-1 所 示 。 


表 13-1 Cocos2d-JS 中 支持 的 Java 数 据 类 型 


Java 数 据 类 型 签 名 
int I 
float F 
boolean Z 
String Ljava/lang/String; 


表 13-2 列 举 一 些 签名 例子 。 
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表 13-2 ”签名 示例 


签 名 说 明 
(F)V 一 个 参数 ， 参 数 类 型 为 float 类 型 ， 没 有 返回 值 
(IF)Ljava/lang/sString; 两 个 参数 ， 第 一 个 参数 为 int 类 型 ， 第 二 个 参数 为 float 类 型 ， 返 回 值 为 String 类 型 
(II)Z 两 个 参数 ， 两 个 参数 都 为 nt 类型， 返回 值 是 boolean 类 型 


注意 String 类 型 签名 的 末尾 还 有 一 个 分 号 (; )。 


13.4 ”小 结 


通过 本 章 的 学 习 ， 我 们 知道 了 如 何 反 射 调用 Objective-C 和 Java 类 的 静态 方法 ， 这 在 Native 上 
是 非常 有 用 的 。 例 如 ， 我 们 可 以 通过 反射 调用 获取 到 手机 的 UUID ， 将 其 生成 为 游客 账号 。 通 过 
反射 调用 ， 判 断 设备 是 否 处 于 Wi-Fi 网 络 环境 下 。 此 外 ， 也 可 以 通过 反射 调用 来 接 入 广告、 统计 
以 及 支付 等 第 三 方 SDK。 


13.5 “参考 资源 


本 章 的 参考 资源 为 http://cocos2d-x.org/docs/manual/framework/cocos2d-js/catalog/index.html。 


Chipmunk 物 理 引 擎 


在 游戏 中 ,我 们 经 常 需要 去 模仿 真实 场景 的 物理 行为 ， 比 如 《愤怒 的 小 乌 》 抛 物 线 的 弹道 ， 
汽车 的 碰撞 等 ， 如 果 我 们 通过 编码 来 实现 这 些 物 理 模拟 ,将 会 涉及 许多 数学 和 物理 公式 ， 实 现 起 
来 既 复杂 又 容易 出 错 ， 这 时 就 需要 用 到 物理 引 警 啦 。 

物理 引擎 可 以 给 物体 赋予 物理 属性 ,使 物体 产生 运动 、 碰 撞 以 及 旋转 ， 从 而 模拟 真实 世界 物 
体 的 运动 。 它 可 以 让 我 们 的 游戏 世界 变 得 更 加 真实 。 

Cocos2d-JS 内 椒 了 两 种 2D 物 理 引 擎 , 分 别 是 Box2D 和 Chipmunk, 它们 的 概念 大 同 小 异 。 但 是 
为 Cocos2d-JS 目 前 在 JSB 上 仅 支 持 Chipmunk 物 理 引 警 ， 所 以 本 章 只 讲解 该 物理 引擎 。 

本 章 内 容 : 

口 物理 概念 

口 Chipmunk 中 的 基本 概念 
口 刚体 

口 形状 

口 约束 

口 空间 

口 碰撞 检测 

口 查询 

口 实例 一 一 拖 动 刚体 的 实现 


14.1 ”物理 概念 
首先 ， 我们 来 学 习 一 些 物理 概念 ， 以 及 它们 在 Chipmunk 上 是 如 何 表现 的 。 


14.1.1 刚体 


刚体 (rigid body ) 是 指 在 运动 中 或 者 受 力 后 形状 和 大 小 不 变 , 以 及 内 部 点 的 相对 位 置 都 不 会 
改变 的 物体 。 在 现实 世界 中 , 刚体 是 不 存在 的 ， 因 为 无 论 再 坚硬 的 物体 ， 受 到 力 的 作用 后 都 会 产 
生 形 变 ， 然 而 对 于 程序 而 言 ， 刚 体 的 特性 是 最 容易 模拟 和 实现 的 。 
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14.1.2 ”面积 


面积 (area ) 是 指 物体 所 围 成 的 平面 图 形 的 大 小 。 对 于 2D 物 理 引 擎 来 说 ， 你 可 以 简单 地 把 它 
理解 为 物体 的 体积 。 在 Chipmunk 中 ， 面 积 的 标量 跟 长 宽 等 其 他 标量 一 致 ， 例 如 一 个 10x20 的 长 方 
体 ， 它 的 面积 就 是 200。 


14.1.3 ”质量 


质量 (mass ) 指 的 是 物体 中 所 含 物 质 的 量 ， 即 物体 惯性 的 大 小 。 通 俗 地 说 ， 即 我 们 平常 说 的 
物体 的 重量 。 在 Chipmunk 中 ， 质 量 的 值 由 自己 指定 ， 它 只 是 一 个 相对 的 量 。 比 较 推 荐 的 做 法 是 ， 
跟 物 体 的 密度 相 结合 ， 采 用 易于 计算 的 方式 来 估算 质量 的 值 。 比 如 ， 一 个 面积 为 200 的 物体 ， 佑 
算 的 密度 为 2， 那 么 它 的 质量 即 是 200x2=400。 


14.1.4 ”密度 


密度 ( density ) 指 的 是 物体 单位 体积 的 质量 大 小 ， 即 “密度 = 质量 /体积 ”， 但 对 于 2D 物 理 引 
擎 来 说 ， 并 不 存在 体积 的 概念 ， 所 以 你 需要 把 这 里 的 体积 理解 成 面积 。Chipmunk 不 会 要 求 你 去 
显 式 设 定 物体 的 密度 ， 它 将 隐 式 地 由 面积 和 质量 决定 , 但 是 在 编码 的 过 程 中 ,如 果 我 们 把 密度 作 
为 一 个 标量 去 设 定 各 个 物体 的 质量 值 ， 将 有 助 于 我 们 控制 游戏 的 物理 表现 。 


14.1.5 “转动 惯量 


转动 异 量 ( moment of inertia ) 是 物体 绕 轴 转动 时 的 惯性 的 量度 ， 它 取决 于 物体 的 质量 、 形 状 
以 及 转轴 的 位 置 ， 这 个 值 通常 难以 估算 ， 所 以 你 可 以 通过 Chipmunk 提 供 的 几 个 计算 转动 惯量 的 
丽 数 来 计算 它 。 


14.1.6 ”弹性 系数 


弹性 系数 ( elasticity ) 是 材料 在 弹性 极限 内 应 力 与 应 变 之 比 ， 它 决定 了 物体 产生 碰撞 后 所 受 
到 的 反弹 力 的 大 小 。 在 Chipmunk 中 ， 我 们 可 以 用 很 直观 的 方式 来 设 定 它 : 0.0 为 无 反弹 ，1.0 为 完 
美 反弹 。 当 两 物体 相互 碰撞 时 ， 它 们 的 弹性 系数 将 由 它们 俩 的 弹性 系数 的 乘积 来 决定 。 


14.1.7 ”摩擦 系数 


摩擦 系数 (friction ) 是 指 两 表面 间 的 摩擦 力 和 作用 在 其 表面 上 的 垂直 力 的 比值 Chipmunk 中 
的 摩擦 采用 的 是 库仑 摩擦 力 ( Coulomb’s Friction )，0.0 为 无 摩擦 。 如 果 你 需要 精确 地 控制 摩擦 系 
数 ， 可 以 去 查阅 下 库仑 摩擦 模型 的 相关 定义 〈 见 本 章 参 考 资源 )。 
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14.2 ”Chipmunk 中 的 基本 概念 
了 解 了 物理 上 的 一 些 概 念 之 后 ， 再 来 看 看 Chipmunk 中 的 基本 概念 。 


14.2.1 基本 类 型 


在 Chipmunk 中 ， 你 将 接触 到 4 种 类 型 ， 具体 如 下 所 示 。 

口 刚体 《rigid body) : 刚体 保存 了 物体 的 物理 属性 ， 例 如 质量 ( mass )、 位 置 (position )、 
旋转 角度 ( rotation )、 速 度 ( velocity ) 等 。 你 可 以 将 它 附 着 到 Sprite 上 来 使 你 的 Sprite 拥 有 
物理 属性 。 

口 形状 〈shape) : 形状 赋予 了 物体 碰撞 体积 ， 使 物体 可 以 参与 碰撞 。 你 可 以 将 形状 附着 到 
刚体 上 来 使 用 它 。 一 个 刚 体 可 以 附着 零 到 任意 多 个 形状 。 形状 包含 了 物体 表面 的 摩擦 系 
数 (friction ) 以 及 弹性 系数 ( elasticity ) 等 属性 。 

口 约束 /关节 (constraint/joint〉: 约束 和 关节 描述 了 物体 之 间 相 互 间 的 附着 关系 以 及 它们 将 
如 何 产生 相互 作用 ， 例 如 手 和 身体 间 的 连接 ， 或 者 汽车 的 车 身 和 车 轮 间 的 连接 ， 均 可 以 

使 用 关节 来 连接 。( 关节 也 属于 约束 ， 后 面 我 们 将 以 约束 来 代 奉 所 有 的 “约束 /关节 ”。) 

口 空间 (space) : 空间 是 模拟 真实 物理 世界 的 场所 , 你 可 以 将 刚体 、 形 状 和 关节 加 入 空间 ， 

使 其 控制 和 模拟 它们 之 间 的 相互 作用 。 


14.2.2 ”Chipmunk 的 坐标 系统 


Chipmunk 拥 有 自己 的 一 套 坐标 系统 , 它 独立 于 Cocos2d-JS , 所 以 我 们 需要 依据 自己 的 需求 跟 
Cocos2d-JS 中 的 坐标 系 相 结合 。 

Chipmunk 的 坐标 系统 很 简单 , 它 是 一 个 二 维 笛 卡 儿 坐标 系 , 虽然 独立 于 Cocos2d-JS 的 坐标 系 ， 
但 是 也 和 Cocos2d-JS 坐 标 系 有 所 类 似 ， 也 都 分 为 X 轴 和 Y 轴 。 其 中 ， 水 平 向 右 表示 X 轴 的 正方 向 ， 
竖 直 向 上 为 Y 轴 的 正方 向 ， 而 左下 角 同 样 为 坐标 系 的 原点 。 我 们 可 以 很 便利 地 将 它 等 比例 地 映射 
到 Cocos2d-JS 当 中 去 ， 可 以 通过 改变 它 跟 Cocos2d-JS 中 坐标 系 的 相对 比例 关系 来 对 它 进 行 缩放 ， 
或 者 也 可 以 跟 某 个 层 的 坐标 系 相 结合 , 通过 改变 层 的 大 小 来 达到 缩放 的 效果 。 但 是 需要 注意 的 是 ， 
我 们 无 法 对 Chipmunk 中 局 部 坐标 系统 进行 缩放 , 所 以 无 法 像 Cocos2d-JS 那 样 通过 缩放 子 坐 标 系 的 
方法 来 缩放 某 一 部 分 的 物体 。 

在 Chipmunk 中 ， 我 们 还 需要 用 到 一 个 坐标 系 ， 就 是 相对 于 刚体 位 置 的 一 个 相对 坐标 系 。 它 
只 是 世界 坐标 系 相 对 于 刚体 位 置 的 一 个 位 移 转换 ， 即 是 一 个 以 刚体 位 置 为 坐标 原点 , 以 与 世界 坐 
标 系 同比 例 构 成 的 一 个 二 维 笛 卡 儿 坐 标 系 。 同 时 ，Chipmunk 也 提供 了 几 个 便利 的 函数 来 供 我 们 
做 相应 的 坐标 系 转换 。 


14.2.3 Chipmunk 中 的 基本 数据 结构 
Chipmunk 中 的 基本 数据 结构 有 cp .vect 和 cp.BB， 下 面 一 起 来 看 一 下 。 
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1. cp .Vect 


它 的 概念 同 Cocos2d-JS 中 的 cc .vec2, 即 为 二 维 坐标 系 的 一 个 点 或 向 量 , 你 可 以 通过 cp .v(x， 

函数 来 创建 它 。 同 时 你 可 以 使 用 cp .vzero 来 代表 原点 (0,0)， 注 意 不 要 去 改变 cp .vzero 的 值 。 

与 cp .Vect 相 关 的 操作 如 表 14-1 所 示 。 下 面 所 列 的 变量 vect 、 参 数 yv、v1 以 及 v2 均 为 cp .Vect 
的 实例 ，cp .vect 的 实例 对 象 调 用 方法 将 改变 自身 的 值 ， 而 调用 cp .v.func () 格 式 的 函数 将 返 
回 计算 结果 。 


表 14-1 与 cp .vect 相 关 的 操作 


对 应 的 属性 或 方法 说 明 
Vect .x X 轴 坐标 值 
vect.y Y 轴 坐标 值 
vect .add (v2) 同 cp.v.add (vl1，v2) ,使 两 个 向 量 相 加 (vl+v2) 
vect .sub (v2) 同 cp.v.sub(v2)， 使 两 个 向 量 相 减 (v1-v2) 
vect .mult (v2) 同 cp.v.mult(v ， 使 向 量 与 数 相 乘 (v*s) 
vect .neg () 同 cp.v.net( ee (-v) 
cp.v.dot (vi, v2) en 职 
cp.v.len(v) 计算 向 量 的 长 度 
cp.v.len2 (x, y) 同上 , 分 别传 信 x 和 y 的 坐标 
cp.v.eql (vi, v2) 计算 两 向 量 是 否 相 等 
cp.v.cross (vi, v2) 计算 两 向 量 的 又 积 ， 注 意 返 回 的 结果 为 Z 轴 坐标 的 长 度 
cp.v.perp (Vv) 计算 向 量 的 垂直 向 量 ， 即 将 向 量 顺 时 针 旋 转 90 度 
cp.v.pvrperp (Vv) 将 向 量 逆 时 针 旋转 90 度 
vect .project (v2) 同 cp.v.project (v1，v2)， 计算 v1 向 量 在 v2 向 量 上 的 投影 向 量 
vect .rotate (v2) 同 cp.v.rotate (v1, v2)， 使 用 复数 乘法 使 vi 沿 v2 做 旋转 ， 如 果 v1 不 是 单位 向 量 ， 
则 会 被 拉 人 
cp.v.unrotate(vi, v2) 反 转 cp.v.rotate 
cp.v.lengthsq(v) 计算 向 量 的 长 度 的 平方 ， 如 果 你 只 需要 比较 长 度 ， 此 方法 的 速度 比 cp.v.1len 快 
cp.v.lengthsq2 (x, y) 同上 , 分 别传 入 x 和 y 的 坐标 
cp.v.normalize(v) 计算 v 的 单位 向 量 
cp.v.normalize_safe (Vv) 同上 ,但 遇 到 零 向 量 时 返回 零 向 量 而 非 产 生 除 零 错 误 
cp.v.clamp(v, len) 限制 v 的 长 度 在 len 以 内 
cp.v.lerp(v1，v2，t) 以 t 百 分 比 (小 数 表示 ) 在 v1 与 v2 间 做 线性 插值 
cp.v.lerpconst(vV1，v2，d) ”以 不 超过 9 的 长 度 在 v1 与 v2 间 做 线性 插值 
cp.v.slerp(v1i, v2, t) 以 t 百 分 比 (小 数 表 示 ) 在 v1 与 v2 间 做 球形 线性 插值 
cp.Vv.slerpconst (Vi, v2, t) ”以 不 超过 t 的 弧度 值 在 vi 与 v2 间 做 球形 线性 插值 
cp.v.dist (v1,v2) 计算 v1 与 v2 的 距离 
cp.v.distsq(vi, v2) 计算 v1 与 v2 的 距离 的 开 方 ， 如果 你 只 需要 比较 长 度 ， 此 方法 的 速度 比 cp.v.9ist 快 


cp.v.near (v1l, v2, dist) 


当 v1 跟 v2 的 距离 比 aist 小 时 ， 返 回 Erue 
cp.v.forangle(a) 返回 以 a 作为 弧度 值 的 单位 向 量 
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( 续 ) 
对 应 的 属性 或 方法 说 明 
回 以 Vv 向量 作为 方向 的 弧度 值 
回 string 表 示 的 向 量 ， 做 aepug 用 


cp.v.toangle(V) 


讽 区 


SC 


2. cp .BB 


cp.BB 类 型 主要 用 于 物理 的 碰撞 检测 ， 称 为 轴 对 齐 包围 盒 ， 又 称 AABB 包 围 盒 ， 如 图 14-1 所 
示 。 它 类 似 于 Cocos2d-JS 的 cc .Rect, 但 又 有 所 不 同 。cc .Rect 表 示 一 个 区 域 , 其 成 员 属性 为 x、 
y、width、height, 分 别 表示 这 个 区 域 的 X 轴 坐标 、Y 轴 坐标 、 宽 度 以 及 高 度 。 而 cp .BB 表示 一 
面 (top )。 实际 上 ，cp .BB 在 1 pS on x + width、t = y + height 时 所 表 个 包 
围 合 ， 其 成 员 属 性 为 1、b、r、t， 分 别 表示 左边 (left )、 下 面 (bottom )、 右 边 (right )、 上 示 的 
区 域 范围 与 cc.rect(x，y，width，height) 一 致 。 


图 14-1 AABB 包 轩 盒 

包围 盒 只 是 Chipmunk 内 部 使 用 的 数据 类 型 ， 通 常情 况 下 不 需要 使 用 它 ， 不 过 理解 它 对 于 我 
们 理解 Chipmunk 的 碰撞 检测 原理 会 有 所 帮助 。 物 理 引 警 常 用 的 3 种 包围 盒 示 例 : 球体 包围 盒 、 轴 
对 齐 包围 盒 (AABB )、 有 向 包围 盒 (OBB )。 在 Chipmunk 中 ， 只 使 用 了 轴 对 齐 包 围 盒 。 


14.3 ”刚体 


在 Chipmunk 中 存在 两 种 刚体 : 动态 刚体 (dynamic body ) 和 静态 刚体 ( static body )。 


动态 刚体 是 默认 的 刚体 类 型 ,它们 会 受 力 、 重 力 和 碰撞 的 影响 , 拥有 有 限 的 质量 , 并 且 会 产 
生 碰 撞 回调 ， 是 你 希望 物理 引擎 模拟 的 刚体 类 型 。 

静态 刚体 是 基本 上 不 移动 的 刚体 类 型 , 你 可 以 很 方便 地 用 它 来 模拟 地 面 、 墙 体 等 不 受 重力 影 
响 的 物体 。 

在 学 习 刚体 相关 的 API 之 前 ， 我 先 创建 出 Chipmunk 的 物理 空间 (或 称 为 物理 世界 )， 这 将 在 
一 定 程度 上 帮助 你 学 习 后 面 的 知识 。 就 像 我 在 2.8 节 中 所 说 的 那样 ， 在 学 习 相 关 知 识 点 的 时 候 ， 
我 们 应 该 立刻 结合 代码 动手 操作 , 加 强 实 战 ， 最 后 从 代码 运行 的 结果 便 可 得 出 学 习 成 果 , 从 而 降 
低 了 学 习 成 本 ， 提 高 了 学 习 效 率 。 
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先 创 建 出 一 个 最 基本 的 物理 空间 , 并 稍微 讲解 一 下 代码 ,此 时 你 可 能 对 下 面 的 代码 不 是 很 熟 
悉 ， 但 是 无 妨 ， 先 跟着 做 即 可 ， 你 可 以 在 阅读 完 14.6 节 之 后 再 回 过 头 来 细 看 这 些 代码 。 


说 明 使 用 Chipmunk 物 理 引 党 时 ， 需 要 在 projectjson 的 modules 数 组 中 添加 chipmunk， 如 下 
所 示 : 


1 "modules" : ["cocos2d", "chipmunk"], 


下 列 代码 用 于 创建 出 物理 空间 : 


1 // 加 载 [物理 空间 ] 

2 loadPhysicsSpace : function()f{ 

3 this.space = new cp.Space(); // 创建 [物理 空间 ] 

4 this.space.gravity = cp.v(0, -150); // 设置 [物理 空间 重力 ] 

5 this.space.sleepTimeThreshold = 0.5; // 设置 [睡眠 检测 临界 值 ] 

6 

7 var thickness = 100; // 物理 空间 围墙 厚度 

8 var staticBody = this.space.staticBody; // 创建 [静态 刚体 ] 

9 Var walls = [ 

10 new cp.SegmentShape(staticBody, cp.v(-thickness, -thickness), 
cp.v(cc.winSize.width, -thickness), thickness)， // 底部 

下 new cp.SegmentShape (staticBody, cp.v(-thickness, -thickness), 
cp.v(-thickness, cc.winSize.height), thickness), // 左边 

2 new cp.SegmentShape (staticBody, cp.v(cc.winSize.width + thickness, 
-thickness), cp.v(cc.winSize.width + thickness, cc.winSize.height), 
thickness ) ， // 右边 

13 new cp.SegmentShape(staticBodqy，cp.v(-thickness，cc.winSize.height + 
thickness), cp.v(cc.winSize.width, cc.winSize.height + thickness), 
thickness) // 顶部 

4 | 

.5 

16 // 创建 围墙 

7 for(var i = 0; i < walls.length; i++){ 

18 var shape = walls[il]; 

19 shape.setElasticity(0.5); // 设置 [围墙 的 弹性 系数 ] 

20 shape.setFriction(0); // 设置 [围墙 的 摩擦 力 ] 

罗 冤 this.space.addStaticShape (shape); // 添加 [围墙 到 物理 空间 中 ] 

22 } 

23 } 


第 9 行 到 第 14 行 描述 了 物理 空间 4 个 边 的 形状 ， 它 们 相当 于 4 块 木 板 ， 固 定 出 一 个 矩形 空间 ， 
而 这 个 空间 就 是 物体 运动 的 场所 。 实际 上 ,物理 空间 所 表现 的 一 切 物 理 信息 都 是 不 见 的 ,例如 空 
间 的 大 小 、 物 体 的 形状 等 。 但 是 ，Cocos2d-JS 提 供 了 一 个 PhysicsDebugNogde 函 数 ， 它 可 以 将 整 
个 物理 空间 绘制 出 来 ， 代 码 如 下 : 


1 // 加 载 [物理 空间 调试 节点 ] 

2 loadDebugPhysicsSpace : function(){ 

2 var node = new cc.PhysicsDebugNode (this.space); 
4 this.addChild(node, Number .MAX VALUE); 

5 } 
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此 时 运行 代码 , 可 以 看 到 构建 出 来 的 物理 空间 边界 。 但 需要 说 明 的 是 , 因为 在 前 面 的 代码 中 ， 
我 设 定 的 物理 空间 的 边界 正好 是 设备 屏幕 的 边界 ， 所 以 ， 应 当 将 当前 的 Layer 进 行 一 定 的 缩放 ， 


才 可 以 看 到 物理 空间 边界 的 DebugNode， 14-2 为 当前 Layez 缩 放 8/10 之 后 所 表现 出 来 的 物理 空 
间 边 界 。 


14.3.1 


图 14-2 ”物理 空间 Debug 


动态 刚体 


创建 好 物理 空间 之 后 ， 你 便 可 以 通过 如 下 方式 来 创建 动态 刚体 : 


1 


Var body = new cp.Body (mass, moment); 


动态 刚体 的 创建 需要 两 个 参数 ， 分 别 是 质量 ( mass ) 和 转动 惯量 ( moment of inertia )， 质 量 
决定 了 刚体 移动 时 的 惯性 , 而 转动 惯量 决定 了 刚体 转动 时 的 惯性 。 通 常 ， 我 们 很 容易 决定 一 个 物 
体 的 质量 ， 却 很 难 去 决定 一 个 物体 的 转动 惯量 。 幸 运 的 是 ，Chipmunk 给 予 了 我 们 如 下 几 个 便利 
的 函数 来 计算 刚体 的 转动 惯量 : 


ODP 


Ul 


cp.momentForCircle(mass, radiusl, radius2, offset) 
cp.momentForSegment (mass, a, b, radius) 
cp.momentForPoly (mass, verts, offset) 
cp.momentForBox(mass, width, height) 
cp.momentForBox2 (mass, box) 


如 果 你 为 刚体 添加 了 多 个 形状 ( shape )， 就 可 以 通过 上 述 函 数 分 别 计算 它们 的 转动 惯量 并 把 


结果 相 加 ， 从 而 得 到 想 要 的 转动 惯量 。 


你 也 


能 够 很 轻松 地 通过 如 下 接口 去 动态 获取 和 设置 物体 的 质量 和 转动 惯量 ( body 为 


cp. 0 ， 下 同 ): 


Dp 


3 


var mass = body.m; // [获取 ] 质 量 
body .setMass (mass); // [设置 ] 质 量 
var moment = body.i; // [获取 ] 转 动 惯量 
boqy .setMoment (moment); // [设置 ] 转动 惯 量 


同时 Chipmunk 还 提供 了 如 下 几 个 便利 的 函数 来 计算 刚体 的 面积 ， 以 便 我 们 去 佑 算 刚 体 的 质 
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| 


// 


// 


A 


OOoODPp 


、 密 度 等 属性 : 


cp. 
cp. 


cp. 


Tr 


计算 空心 圆 的 面积 ，r1 为 外 圆 半 径 ，r2 为 内 圆 半径 ，r2 等 于 0 时 为 实心 圆 面积 
areaForCircle(r1l, r2) 

计算 线段 面积 ，a 和 bb 为 起 点 和 终点 ，Ir 为 线段 的 宽度 

areaForSegment (a, b, rr) 

计算 本 多 边 形 的 面积 ，verts 为 cp.Vect 类 型 的 Array 

areaForPoly (verts) 


下 面 我 在 当前 的 物理 空间 中 创建 出 一 个 动态 刚体 ， 相 关 代 码 如 下 : 


汉 


1 
多 
3 
4 
3 
6 
7 
8 
9 


OW OPO 


17 } 


加 载 [ 精 灵 刚 体 ] 


loadSpriteBody : function(){ 


// 创建 物理 精灵 
var node = new cc.PhysicsSprite(res.sh node 256 png); 
this.addChild (node); 


var mess = 10; // 质量 

var body = new cp.Body (mess, cp.momentForBox(mess, node.width, node.height)); 
this.space.addBody (body); 

body.setPos(cp.v(cc.winSize.width /2, cc.winSize.height /2)); 


var shape = new cp.BoxShape (body, node.width, node.height); 
this.space.addShape (shape); // 为 物理 空间 添加 形状 


node .setBody (body); // 精灵 设置 刚体 
shape.setElasticity(0.5); // 设置 [弹性 系数 ] 
shape.setFriction(0.5); // 设置 [摩擦 力 ] 


第 4 行 代码 用 于 创建 一 个 物理 精灵 ，cc.Physicssprite 继 承 自 cc.sprite， 并 且 提 供 了 可 


以 设置 刚体 的 API， 如 第 14 行 代码 将 cc.Physicssprite 和 cp.Bodqy 绑 定 在 一 起 ， 使 得 精灵 拥有 
了 刚体 的 物理 特性 。 运 行 代码 后 ， 效 果 如 图 14-3 所 示 。 需 要 说 明 的 是 ，cc .PhysicsDebugNode 
给 动态 刚体 绘制 出 的 Debug 信 息 区 域 为 红色 的 ， 而 静态 刚体 则 为 灰色 的 。 


图 14-3 ”物理 空间 和 物理 精灵 


除 此 之 外 ，cp .Body 提 供 了 一 些 接 口 ， 具 体 如 下 : 


1 body.getPos() // [获取 ]body 的 位 置 
2 body.setPos (pos) // [设置 ]body 的 位 置 
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3 body.a // [获取 ]body 的 角度 

4 body.setAngle(angle) // [设置 ]body 的 角度 

5 body.getVvel() // [获取 ]boqy 的 速度 

6 boqy.setVel (vel) // [设置 ]body 的 速度 

7 body.getAngVel() // [获取 ]body 的 转速 

8 body.setAngVel (vel) // [设置 ]body 的 转速 

此 外 ， 还 可 以 通过 以 下 几 个 接口 给 刚体 施加 力 : 

1 var force = body.f // [获取 ] 施 加 在 刚体 上 的 力 
2 body.resetForces() // [ 重 置 ] 施 加 在 刚体 上 的 力 
3 body.applyForce(force, r) // 在 刚体 上 施加 [ 力 ] 

4 body.applyImpulse (impulse, r) // 在 刚体 上 施加 [ 冲 量 ] 


其 中 ，force 和 impulse 都 为 cp .Vect 类 型 ，r 为 力 (或 冲 量 ) 的 作用 点 离 刚 体位 置 的 偏 移 量 。 
另外 ， 需 要 注意 的 是 力 (force ) 和 冲 量 ( impulse ) 的 区 别 ， 力 指 的 是 持续 的 力 ， 将 会 一 直 
作用 在 刚体 上 ， 例 如 推 箱子 的 力 。 而 冲 量 指 的 是 瞬间 的 力 ， 只 有 在 函数 调用 时 ， 才 给 刚体 施加 
一 次 瞬间 的 冲击 力 ， 例 如 高 尔 夫 球 杆 击 打球 的 力 。 现 在 ， 我 给 之 前 的 刚体 添加 一 个 冲 量 ， 代 码 
如 下 : 

1 body.applyImpulse(cp.v(3000, 3000), cp.v(0, 0)); 

男 外， 可 以 通过 以 下 接口 给 刚体 添加 和 移 除 形状 : 


1 body.addShape (shape) // [添加 ] 形 状 
2 body.removeShape (shape) // [ 移 除 ] 形 状 


也 可 以 通过 以 下 接口 移 除 刚体 上 的 约束 : 

1 body.removeConstraint (constraint) // [ 移 除 ] 约束 

同时 ，cp . Body 还 提供 了 几 个 便利 的 函数 来 遍历 刚体 上 的 形状 、 约 束 和 碰撞 对 ( 关于 碰撞 对 
( collision pairs ) 的 内 容 ， 将 在 后 续 章 节 中 介绍 ): 


1 boqy .eachShape (func) 
2 body.eachConstraint (func) 
3 body.eachArbiter (func) 


其 中 ，func 为 回调 函数 ， 每 个 func 都 携带 一 个 参数 ,分 别 代 表 了 形状 、 约 束 以 及 碰撞 对 ， 它 在 
body 上 的 每 个 形状 、 约 束 和 碰撞 对 上 均 会 执行 一 次 回调 函数 。 例 如 ,你 要 遍历 出 刚体 所 有 的 形 
状 ， 那么 代码 应 该 如 下 : 


1 var func = function(shape)t 
2 cc.log(shape); 

二 

4 bodqy.eachShape(func) : 


其 中 函数 变量 func 的 参数 shape 即 代表 形状 。 


另外 , 值得 注意 的 是 , 使 用 sacharbiter 函 数 前 ， 需 要 开启 space .enablecontactGraph 
(具体 请 参照 14.6 节 )。 


有 时 候 , 我 们 需要 在 poqay 和 space 之 间 的 坐标 系统 进行 相互 转换 ， 这 类 似 于 Cocos2d-JS 坐 标 
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系 中 本 地 坐标 和 世界 坐标 的 概念 。 下 面 这 两 个 函数 将 给 我 们 带 来 这 样 的 便利 : 


1 body.local2World(vect) // 将 相对 于 body 的 坐标 转换 为 世界 坐标 

2 body.world2Local (vect) // 将 世界 坐标 转换 为 相对 于 body 的 坐标 

下 面 我 们 来 看 一 下 cp .Body 提 供 的 几 个 状态 查询 函数 : 

1 body.isSleeping() // 查询 body 是 否 在 sleep 的 状态 

2 body.isStatic!() // 查询 body 是 否 为 静态 刚体 

3 body.isRogue() // 查询 body 是 否 被 加 入 到 空间 中 ， 未 加 入 将 返回 true 


睡眠 〈sleep ) 是 这 样 一 种 机 制 : 当 Chipmunk 检 测 到 刚体 在 一 段 时 间 内 都 处 于 静止 状态 时 ， 
它 将 会 使 刚体 进入 sleep 状 态 , 直到 它 受 到 新 的 力 或 者 碰撞 或 者 被 唤醒 。 对 于 已 经 进入 sleep 状 态 的 
刚体 ，Chipmunk 将 不 用 关心 和 处 理 它们 的 某 些 状态 ， 从 而 节省 了 CPU 的 时 间 和 电池 的 寿命 。 


cp.Body 有 如 下 几 个 和 sleep 相 关 的 接口 : 


1 body.activate() // 激活 刚体 

2 boqy.activateStatic() // 激活 静态 刚体 

3 body.sleep() // 使 刚体 睡眠 

4 body.sleepWithGroup(group) // 使 刚体 随 着 组 睡眠 

注意 ，body .sleepWithGroup (group) 中 的 参数 group 为 cp .Body 类 型 ， 并 非 碰撞 检测 中 


的 组 。 当 Chipmunk 中 的 刚体 睡眠 时 ， 它 将 会 使 所 有 碰 触 或 连接 的 刚体 睡眠 ， 我 们 称 其 为 组 。 当 
组 中 的 一 个 刚体 被 激活 时 ,全 组 刚体 将 被 激活 。 此 接口 允许 你 设置 刚体 随 着 一 组 刚体 睡 眼 ， 当 此 
组 被 激活 时 ， 刚 体 将 被 激活 。 


14.3.2 ”静态 刚体 
静态 刚体 的 创建 方式 很 简单 ， 可 以 使 用 如 下 接口 创建 : 


1 var staticBody = new cp.StaticBody (); 

实际 上 ，staticBody 也 是 cp .Body 的 实例 ， 所 以 你 可 以 使 用 cp .Body 上 所 有 的 接口 ， 也 可 
以 通过 如 下 方式 来 创建 静态 刚体 : 

1 var staticBody = new cp.Body (Infinity，Infinity); //Infinity 值 为 正 无 穷 

但 是 我 们 并 不 推荐 采用 此 种 方式 来 创建 静态 刚体 , 因为 它 通常 会 使 与 其 接触 的 刚体 无 法 进入 
sleep 状 态 而 造成 性 能 损失 。 如 果 我 们 用 此 方式 来 创建 静态 刚体 ，Chipmunk 人 往往 并 不 认为 它 属于 
静态 刚体 ， 调 用 body .isstatic() 函数 将 返回 false， 所 以 它 并 不 像 其 他 静态 刚体 那样 始终 处 
于 sleep 状 态 ， 导 致 Chipmunk 很 难 去 决定 是 否 要 将 与 其 接触 的 其 他 物体 设置 为 sleep 状 态 ， 从 而 造 
成 不 必要 的 性 能 损失 。 

当然 , 这 种 方法 并 不 是 一 无 是 处 。 由 于 静态 刚体 的 特殊 性 ， 当 我 们 为 静态 刚体 添加 形状 并 把 
形状 加 入 到 空间 后 , 形状 的 位 置 将 无 法 随 着 静态 刚体 位 置 的 改变 而 改变 。 也 就 是 说 ,我 们 将 无 法 
再 移动 这 些 形状 。 然 而 如 果 我 们 用 上 述 方法 创建 静态 刚体 ,将 不 会 遇 到 此 类 问题 有 时 候 这 会 是 
一 个 很 有 用 的 功能 ， 比 如 我 们 需要 创建 一 堵 可 以 移动 的 墙 。 所 以 ， 当 需要 一 个 静态 刚体 时 ， 请 根 
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据 项 目 需求 慎重 做 出 选择 。 
另外 , 由 于 静态 刚体 不 可 移动 的 特性 , 在 一 个 空间 中 , 你 往往 只 需要 一 个 静态 刚体 就 足够 了 ， 
我 们 需要 做 的 只 是 把 所 有 不 可 移动 的 形状 添加 到 这 个 静态 刚体 中 。 所 以 ，Chipmunk 已 经 为 我 们 
提供 了 这 样 一 个 静态 刚体 ,我 们 可 以 选择 space .staticBody 来 使 用 它 , 而 不 用 自己 再 去 创建 了 。 
下 列 代 码 创 建 出 一 个 静态 刚体 : 
1 // 加 载 [静态 刚体 ] 


2 loadStaticBody : function(){ 
3 // 创建 物理 精灵 
4 var node = new cc.PhysicsSprite(res.sh node 256 png); 
5 this.addChild (node); 
6 
g // 创建 静态 刚体 
8 var body = this.space.staticBody; 
9 node.setBody (body); // 精灵 绑 定 刚体 
4 body.setPos(cp.v(cc.winSize.width/ 2, cc.winSize.height /2)); 
4 
12 // 形状 创建 
i var shape = new cp.BoxShape (body, node.width, node.height); 
14 this.space.addShape (shape); // 将 形状 添加 到 物理 空间 
15 shape.setElasticity(1); // 设置 [弹性 系数 ] 
16 shape.setFriction(1); // 设置 [摩擦 力 ] 
人 
A | 小 
14.4 ”形状 


在 现实 世界 中 , 一 个 物体 仅 拥有 cp . Body 里 面 的 那些 属性 是 不 够 的 , 还 需要 一 个 重要 的 属性 : 
形状 。 所 以 ，Chipmunk 也 提供 了 这 样 一 个 类 来 供 我 们 模拟 现实 世界 : cp .Shape。 

在 现实 世界 中 ， 物 体 往往 会 发 生 形变 ， 比 如 歇 弹 可 破 的 肌肤 、 摔 在 地 上 就 会 碎 裂 的 玻璃 杯 、 
汽车 开 过 就 会 溅 起 的 小 水 浴 ， 然 而 Chipmunk 的 形状 并 不 能 满足 这 些 需 求 ， 因 为 Chipmunk 只 能 模 
拟 刚 体 的 行为 。 但 是 ,这 并 不 是 说 我 们 的 程序 就 无 法 实现 上 述 这 些 效果 , 我 们 照样 可 以 使 用 一 些 
很 精妙 的 技巧 去 实现 它 。 比 如 , 可 以 通过 移 除 一 整个 刚体 使 用 许多 较 小 而 又 分 散 的 刚体 来 代替 它 ， 
并 使 这 些 刚体 碎片 拥有 不 同方 向 的 初速 度 来 模拟 碎 裂 的 效果 。 再 比如 , 可 以 把 许多 非常 小 的 刚体 
使 用 约束 连接 在 一 起 ， 从 而 形成 一 个 大 的 物体 来 模拟 该 物体 在 受 力 时 产生 的 形变 效果 等 。 当 然 ， 
这 就 需要 各 位 读者 充分 发 挥 自己 的 想象 力 啦 。 另 外 , Google 的 LiquidFun 流 体 引 擎 也 可 实现 流体 物 
理 特性 的 效果 ， 读 者 若 有 兴趣 ， 可 去 http://google.github.io/liquidfun/ 查 阅 相 关 的 资料 。 

下 面 我 们 就 来 学 习 一 下 Chipmunk 中 的 形状 。 


14.4.1 基 类 cp. shape 


在 Chipmunk 中 ， 存 在 这 样 3 种 基本 的 形状 。 
口 圆 (circle) : 即 圆 形 。 
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口 线段 (line segment) : 它 通常 用 来 做 墙 、 地 面 、 边 界 等 ,其 宽度 能 够 设置 。 它 一 般 是 添 
加 在 静态 刚体 上 ， 但 我 们 也 可 以 给 它 设置 较 大 的 宽度 ， 把 它 作为 两 头 为 半圆 形 的 长 条 形 


状 来 看 待 ， 如 图 14-1 所 示 。 


口 凸 多 边 形 (convex polygon) : 


注意 ，Chipmunk 仅 支持 凸 多 边 形 ， 如 果 你 需要 凹 多 边 形 ， 


可 以 通过 组 合 多 个 凸 多 边 形 来 实现 。 我 们 还 可 以 通过 以 下 接口 来 创建 四 边 形 : 


// width 和 height 分 别 表示 宽 和 高 ， 为 Number 类 型 
Var box = cp.BoxShape (body, width, height); 


1 
3 // box 为 cp.BB 类 型 
4 


Var box2 = cp.BoxShape (body, box); 


实际 上 ， 这 两 个 Boxshape 都 属于 cp .PolyShape 类 的 实例 ， 这 两 个 接口 只 是 能 够 方便 地 
创建 四 边 形 而 已 ， 所 以 它们 能 够 使 用 cp .Polyshape 的 所 有 方法 。 


通过 以 上 几 个 形状 ,我 们 就 能 够 组 合 出 各 种 各 样 的 形状 来 ， 同 时 ， 它 们 都 继承 自 cp. Shape 
类 ， 所 以 下 面 就 来 关注 cp . snape 都 拥有 哪些 属性 ( 变量 shape 为 cp .Shape 的 实例 ， 下 同 )。 


下 面 的 代码 用 于 设置 和 获取 弹性 系数 以 及 摩擦 力 : 


shape.setElasticity(e); 
var friction = shape.u; 


大 ODP 


shape.setFriction(u); 


var elasticity = shape.e; 


弹性 系数 ] 
弹性 系数 ] 
摩擦 力 ] 
摩擦 力 ] 


而 碰撞 检测 相关 的 参数 将 在 后 续 章 节 中 进一步 介绍 : 


Var group = shape.group; 
UOUD., -L103 


DP 


layer.setLayers (layers); 


Var layers = shape.layers; 


碰撞 检测 相关 的 组 
碰撞 检测 相关 的 组 
碰撞 检测 相关 的 层 
碰撞 检测 相关 的 层 


传感器 相关 接口 的 值 为 Boolean 类 型 相关 代码 如 下 : 


1 var isSensor = shape.sensor;// 获取 
2 shape.setSensor(isSensor); 


是 否 只 是 传感器 ] 的 结果 
是 否 只 是 传感器 ] 


若 shape.sensot 的 值 为 true, 则 只 调用 碰撞 回调 , 并 不 会 产生 真实 的 碰撞 。 更 多 碰撞 检测 


相关 的 内 容 请 查看 14.7 节 。 


获取 和 设置 刚体 时 ， 需 要 注意 的 是 ， 只 能 在 shape 未 加 入 space 时 才能 设置 刚体 ， 否 则 会 报 


错 。 设 置 和 获取 刚体 的 代码 如 下 : 


1 var body = shape.getBodqy () 


2 shape.setBody (body); 
获取 AABB 包 围 盒 的 代码 如 下 : 


1 shape.getBB(); 


更 新 位 置 和 旋转 角度 的 代码 如 下 


1 shape.update(pos, rot); 


// 获取 [刚体 ] 14 


// 设置 [刚体 ] 


// 获取 [包围 盒 ] 


中 pos 和 rot 均 为 cp.Vect 类 型 : 


此 外 ，cp .Shape 还 有 一 些 查 询 相关 的 接口 〈 将 在 14.8 节 中 进一步 讲解 )， 具体 如 下 : 
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// 点 查询 ，p 为 cp.Vect 类 型 

shape.pointQuery (p) 

// 最 近 点 查询 ，D 为 点 坐标 ， 是 cp .Vect 类 型 
shape.nearestPointQuery (p) 

// 线段 查询 ， 其 中 a 和 bb 为 线段 的 起 点 和 终点 ， 它 们 是 cp.Vect 类 型 
shape.segmentOQOuery (a, b) 


OOOODP 


14.4.2 ” 圆 形 
同形 (circle shape ) 的 创建 方式 如 下 : 


1 var circle = new cp.CircleShape(body, radius, offset); 

其 中 raqius 为 Number 类 型 ， 表 示 圆 的 半径 。offset 是 cp.Vect 类 型 ， 为 圆 形 与 刚体 重心 
的 偏离 值 。 可 以 通过 如 下 方式 来 获取 圆 形 的 相关 属性 (注意 不 要 改变 它们 ， 其 中 circle 为 
cp.Circleshape 的 实例 ): 


circle.r  // 获取 [半径 ] 
circle.c  // 获取 [偏离 值 ] 


1 var radius 
2 var offset 


14.4.3 ”线段 
线段 (line segment ) 的 创建 方式 如 下 : 


1 var segment = new cp.SegmentShape(body, a, b, r); 
其 中 ，a 和 b 均 为 cp .Vect 类 型 ， 表示 线 段 的 起 点 和 终点 ，r 为 数字 类 型 ， 是 线段 的 宽度 。 同 时 ， 
可 以 通过 如 下 方式 来 获取 线段 的 相关 属性 ( 注意 不 要 改变 它们 ， 其 中 segment 为 


cp.SegmentShape 的 实例 ): 


1 var a = segment.a // 获取 [线段 起 点 ] 
2 var b = segment.b  // 获取 [线段 终点 ] 
3 var r = segment.r // 获取 [线段 厚度 ] 

var n = segment.n // 获取 [线段 法 线 ] 


Sl 


此 外 ， 还 可 以 重新 设置 线段 的 位 置 : 

1 segment.setEndpoints(a, b); 
其 中 a 和 b 同 样 均 为 cp .Vect 类 型 , 表示 线段 的 起 点 和 终点 。 男 外 值得 注意 的 是 ， 当 我 们 把 几 条 线 
段 连 接 起 来 , 它们 往往 直接 会 因为 产生 碰撞 而 出 现 缝 际 ， 如 果 想 要 避免 这 种 情况 , 需要 用 到 如 下 
接口 : 

1 Segment .SetNeighbors (PreV，mext) ; 


其 中 ，prev 和 next 均 为 cp .Vect 类 型 ， 分 别 表 示 上 一 条 和 下 一 条 线段 的 终点 。 


14.4.4 凸 多 边 形 
凸 多 边 形 ( convex polygon ) 的 创建 方式 如 下 : 
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1 var poly = new cp.PolyShape (body, verts, offset); 

其 中 verts 为 Array 类 型 ， 表 示 凸 多 边 形 点 ( cp .Vect ) 的 集合 ，offset 为 cp.Vect 类 型 ， 
表示 与 刚体 重心 的 偏离 值 。 同 时 , 我 们 可 以 通过 如 下 方式 来 获取 和 设置 凸 多 边 形 的 相关 属性 ( 注 
意 不 要 改变 它们 ， 其 中 poly 为 cp .Polyshape 的 实例 ): 


1 // 获取 [ 凸 多 边 形 的 顶点 集合 ] 
2 var verts = poly.verts; 
3 // 设置 [ 西 多 边 形 的 顶点 集合 ] ， 其 参数 含义 同 cp. PolyShape 
4 poly.setVerts(verts, offset); 
14.5 ”约束 


在 Chipmunk 中 ,约束 ( constraint ) 都 是 基于 速度 的 约束 ， 这 意味 着 它们 主要 通过 同步 两 个 刚 
体 的 速度 进行 作用 。 约束 将 速度 视 为 其 主要 的 输入 并 产生 一 个 速度 的 变化 来 作为 它 的 输出 。 一 些 
约束 (尤其 是 关节 ) 通过 改变 速度 来 修正 位 置 的 差异 。 

严格 来 说 ， 两 个 刚体 的 弹簧 并 不 是 约束 ， 它 会 创建 一 个 力 来 影响 两 个 刚体 的 速度 ， 弹 得 关联 
的 阻尼 才 是 真正 的 约束 , 但 是 我 们 通常 并 不 需要 关心 这 些 , 但 还 是 会 将 弹 得 作为 约束 的 一 部 分 来 
看 待 。 


14.5.1 基 类 cp.constraint 


Chipmunk 中 所 有 的 约束 都 继承 自 cp .constraint。 下 面 先 来 关注 一 下 它 都 有 哪些 属性 
中 constraint 为 cp. Constraint 的 实例 对 象 : 


PT 


// 连接 的 第 一 个 刚体 (cp.Body ) 

constraint .a; 

// 连接 的 第 二 个 刚体 (cp .Body) 

constraint.b; 

// 两 物体 间 可 用 的 最 大 作用 力 ， 为 数字 类 型 默认 为 Infinity， 即 正 无 穷 

constraint .maxForce; 

// 一 秒 后 保留 的 误差 百分比 ， 上 默认 为 Math.pow(1-0.1，60)， 即 每 1/60 秒 修正 10% 的 误差 
constraint .errorBias; 

9 // 约束 能 够 实施 错误 修正 的 最 大 速度 ， 默 认为 Infinity， 即 正 无 穷 

10 constraint .maxBias; 


Chipmunk 总 共 提供 了 10 种 约束 来 供 我 们 使 用 ， 下 面 我 将 会 逐一 介绍 它们 。 


OTOPRODP 


说 明 ”以 下 约束 名 称 均 没 有 做 中 文 翻译 , 原因 有 二 , 其 一 是 因为 大 多 数 约束 都 没有 浅显 易 懂 的 中 
文 翻译 名 称 ， 反 比 英文 名 称 来 得 上 涩 难 懂 。 其 二 ， 英 文 名称 跟 类 名 称 一 一 对 应 ， 平 时 使 用 
起 来 也 比 中 文 名 称 更 能 明白 其 所 指 ， 所 以 本 书 直接 使 用 了 约束 的 英文 名 称 而 未 做 翻译 。 
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14.5.2 Pin Joint 


Pin Joint 的 作用 是 将 两 个 刚体 用 固定 的 杠杆 或 者 图 钉 连 接 起 来 , 即 当 Pin Joint 创 建 后 ， 两 销 点 
的 距离 始终 保持 不 变 。 

Pin Joint 的 创建 方式 如 下 : 

1 var pin = new cp.PinJoint (bodyA, bodyB, anchrl1l, anchr2); 
其 中 bodyA 和 bodyB 为 要 连接 的 两 个 物体 ， 均 为 cp .Body 类 型 。anchr1 和 anchr2 分 别 为 锚 点 相 
对 于 bodyA 和 pbodyB 重 心 的 相对 坐标 ， 丝 为 cp .Vect 类 型 。 男 外 ， 我 们 可 以 通过 pin .dist 获 取 
两 锚 点 间 的 距离 。 


14.5.3 Slide Joint 

Slide Joint 类 似 于 Pin Joint， 不 同 的 是 它 拥有 最 短 和 最 长 距离 的 限制 ， 即 两 销 点 的 距离 可 以 在 
最 短 和 最 长 距离 间 滑 动 。 

Slide Joint 的 创建 方式 如 下 : 


1 var slide = new cp.SlideJoint(a, b, anchrl, anchr2, min, max); 


其 中 min 和 max 是 销 点 间 的 最 短 /最 长 距离 限制 ， 均 为 Number 类 型 ， 其 他 参数 同 cp .PinJoint。 


14.5.4 Pivot Joint 


Pivot Joint 也 类 似 于 Pin Joint, 不 同 的 是 Pivot Joint 使 用 单个 锚 点 固定 两 个 刚体 , 也 可 以 理解 为 
它 是 Pin Joint 两 销 点 间 的 距离 为 零 的 特殊 形式 。 
Pivot Joint 有 两 种 创建 方式 ， 具 体 如 下 : 


1 // anchr 为 世界 坐标 

2 var pivotl = new cp.PivotJoint(a, b, anchr); 

3 // anchr1 和 anchr2 分 别 为 相对 于 a 和 Pb 的 重心 的 相对 坐标 

4 var pivot2 = new cp.PivotJoint(a, b, anchrl, anchr2); 


关于 Pivot Joint， 有 一 个 很 好 用 的 技巧 ， 那 就 是 可 以 使 用 此 约束 来 达到 鼠标 拖 动 刚体 的 效果 。 
通过 给 鼠标 创建 一 个 刚体 (我们 暂且 把 它 称 作 鼠标 刚体 )， 将 需要 被 拖 动 的 刚体 跟 鼠 标 刚 体 通 过 
Pivot Joint 连 接 起 来 ， 我 们 可 以 在 鼠标 按 下 时 创建 该 约束 ， 弹 起 后 释放 它 ， 就 可 以 实现 鼠标 点 击 
拖 动 刚体 的 效果 ,具体 可 参见 本 章 实例 。 


14.5.5 Groove Joint 


Groove Joint 类 似 于 Pivot Joint, 不 同 的 是 它 相 对 于 body1 并 非 使 用 的 是 锚 点 而 是 线段 , body2 
上 的 销 点 可 以 在 body1 的 线段 上 自由 移动 。 


Groove Joint 的 创建 方式 如 下 : 
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1 var groove = new cp.GrooveJoint (bodyA, bodyB, groove a, groove_b, anchr2); 


其 中 ,groove_a 和 groove_b 为 相对 于 bodyA 的 线段 的 起 点 和 终点 ,anchr2 表 示 相 对 于 b 的 锚 点 。 


14.5.6 Damped Spring 


Damped Spring 类 似 于 Slide Joint， 不 同 的 是 两 锚 点 间 的 连接 受到 的 是 弹力 的 约束 ， 就 像 在 两 
刚体 的 锚 点 间 连 接 了 一 个 弹簧 。 


Damped Spring 的 创建 方式 如 下 : 
1 var Spring = new cp.DampedSpring(a, b, anchrl1l, anchr2, restLength, stiffness, 
damping); 
其 中 , restLengtph 是 静止 时 锚 点 间 的 长 度 , 为 Number 类 型 。stiffness 表 示 杨 氏 模 量 (Young's 
Modulus )， 同 样 为 Number 类 型 ,具体 请 查阅 杨 氏 模 量 的 相关 定义 ( 见 参考 资源 )。damping 为 弹 
簧 的 阻尼 ， 即 弹 得 的 柔软 程度 ， 也 为 Number 类 型 ， 推 荐 数值 为 0.0 到 1.0 之 间 的 数 。 


14.5.7 Damped Rotary Spring 


Damped Rotary Spring 类 似 于 Damped Spring， 不 同 的 是 它 约束 的 是 弧度 而 非 距离 。 
Damped Rotary Spring 的 创建 方式 如 下 : 


1 var rotarySpring = new cp.DampedRotarySpring(a, b, restAngle, stiffness, damping); 


其 中 ，restangle 为 静止 时 两 刚体 间 的 角度 ， 其 余 参 数 可 参考 cp .Dampedspring。 


14.5.8 Rotary Limit Joint 

Rotary Limit Joint 类 似 于 Slide Joint， 不 同 的 是 两 刚体 间 受 到 的 约束 是 它们 间 最 大 和 最 小 的 弧 
度 而 非 距离 。 

Rotary Limit Joint 的 创建 方式 如 下 : 


1 var rotaryLimitJoint = new cp.RotaryLimitJoint(a, b, min, max); 


其 中 ，min 和 max 为 两 刚体 间 最 大 和 最 小 的 弧度 值 ， 均 为 Number 类 型 。 


14.5.9 Ratchet Joint 
Ratchet Joint 的 作用 方式 类 似 于 套 简 扳手 。 
Ratchet Joint 的 创建 方式 如 下 : 


1 var ratchet = new cp.RatchetJoint (a, b, phase, ratchet); 


其 中 ，phase 是 当 决 定 环 轮 角 度 时 的 初始 弧度 位 移 ，ratchet 是 两 次 击 打 间 的 弧度 。 
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14.5.10 Gear Joint 
Gear Joint 的 作用 方式 类 似 于 齿轮 ， 它 保持 着 一 对 刚体 恒定 的 角速度 比 。 创 建 方式 如 下 : 


1 var gear = new cp.GearJoint (a, b, phase, ratio); 
其 中 ，phase 为 两 刚体 初始 弧度 位 移 ，ratio 为 a 与 b 的 角速度 比 ， 我 们 也 可 以 通过 以 下 接口 来 改 
变 它 的 角速度 比 : 


1 gear.setRatiol(ratio); 


14.5.11 Simple Motor 
Simple Motor 保 持 着 两 刚体 间 恒 定 的 角速度 ， 其 创建 方式 如 下 : 


1 var monitor = new cp.SimpleMotor(a, b, rate); 


其 中 ，rate 为 a 和 pp 刚体 间 的 恒定 角速度 。 


14.6 ”空间 


上 面 介绍 了 Chipmunk 的 刚体 、 形 状 和 约束 ,但 是 仅仅 拥有 这 些 还 不 够 ， 我们 还 需要 一 个 场 
景 来 模拟 它们 ， 而 这 个 场景 就 是 空间 。 空 间 可 由 如 下 方式 创建 : 

1 var space = new cp.Space(); 

Chipmunk 并 没有 主动 执行 物理 模拟 , 我 们 必须 手动 调用 它 才能 使 物理 模拟 运行 起 来 ( space 
为 cp .Space 的 实例 ， 下 同 ): 

1 space.step(dt); // dt 为 间隔 时 间 稚 ， 代 表 一 次 物理 帧 所 经 历 的 时 间 

通常 ， 应 该 将 此 函数 调用 放 在 游戏 帧 回调 当中 ,让 游戏 在 每 帧 都 执行 一 次 物理 帧 。 一 般 情形 
下 ,我 们 推荐 使 用 一 致 的 间隔 时 间 惟 来 设置 此 值 ， 这 样 能 够 使 物理 模拟 更 加 稳定 ,但 是 如 果 游 戏 
帧 数 过 低 , 物理 模拟 速度 也 会 变 得 很 慢 。 如 果 我 们 的 游戏 跟 时 间 关 联 较 大 ,这 种 做 法 也 是 不 能 接 
受 的 。 不 过 可 以 使 用 一 些 技巧 ， 既 可 以 使 物理 帧 每 帧 的 时 间 固 定 ， 又 可 以 使 物理 时 间 跟 游戏 时 间 
同步 ， 相 关 代码 如 下 所 示 : 


Var timeRemain = 0; 
Var stepTime = 1 / 60.0; 
node.update = function(dt)t{ 
timeRemain += dt; 
while(timeRemain - stepTime >= 0)f{ 
space.step(stepTime); 
timeRemain -= stepTime; 


} 


cp.Space 提 供 了 几 个 全 局 设置 的 属性 参数 ， 它 们 将 会 影响 到 整个 物理 模拟 的 精度 和 表现 ， 
如 下 。 


OO ODP 
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口 gravity: 物理 空间 重力 ， 值 为 一 个 cp.v (x，y) 类 型 的 值 。 

D iterations: Number 类 型 ， 默 认 值 为 10， 表 示 迭 代 次 数 。 此 迭代 次 数 将 会 影响 到 模拟 
的 精度 ， 更 高 的 数值 会 使 模拟 变 得 更 加 精确 、 完 美 。 刚 体 看 上 去 更 加 坚硬 ， 但 是 会 消耗 
更 多 的 CPU， 较 低 的 数值 会 使 模拟 变 得 更 加 模糊 ， 刚 体 看 上 去 也 更 加 柔软 ,但 是 能 节省 
CPU 时 间 ， 所 以 最 好 根据 自己 的 需要 调整 它 。 

口 idlespeedThreshold: Number 类 型 ， 默认 值 为 0， 表 示 静 止 速度 临界 值 ， 即 刚体 被 视 

为 静止 的 速度 临界 值 。 Chipmunk 将 根据 重力 设置 自动 设 定 此 临界 值 。 

口 sleepTimeThreshold: Number 类 型 ,表示 睡眠 检测 临界 值 ， 用 来 控制 刚体 静止 后 多 长 
时 间 进 入 sleep 状 态 ( 相关 介绍 详 见 14.3.2 节 )。 其 默认 值 为 Infinity， 代表 关 闭 此 算法 ， 
设置 此 值 将 隐 式 开启 space.enableContactGrapho。 

口 collisionSlop: Number 类 型 ， 默 认为 0.1， 表 示 碰 撞 刚 体 间 的 穿 透 鼓励 值 ， 如 果 你 的 

物理 模拟 质量 很 差 ， 可 以 在 不 会 出 现 明显 的 碰撞 重生 的 前 提 下 尽 可 能 增加 此 值 。 

口 collisionBias: Number 类 型 ， 该 参数 决定 了 刚体 重叠 后 分 离 的 速度 。Chipmunk 会 让 
快速 移动 的 刚体 重 琶 ， 然 后 再 修复 重 释 。 重 从 基本 上 是 不 可 避免 的 ， 此 值 代表 了 每 秒 重 
倒 的 错误 保留 百分比 偏 值 ， 不 推荐 使 用 0， 默 认为 Math.pow(1，-0.1，60)， 指 的 是 在 
60 帧 的 前 提 下 ， 每 秒 修复 10% 的 重 仅 。 

D collisionPersistence: 表示 保存 的 碰撞 帧 数量 ， 基 本 不 需要 修改 。 

口 enableContactGraph: Boolean 类 型 ， 表示 是 否 在 每 个 步骤 重建 碰撞 图 , 默认 为 false， 
会 略微 提升 一 些 性 能 。 当 space.sleepTimeThreshold 开 启 时 ,将 被 隐 式 开启 。 注 意 ， 
如 果 你 要 使 用 body .eachArbiter 了 水 数 ， 必 须 开 启 此 值 。 

口 aamping: 阻尼 ， 你 可 以 用 它 来 模拟 空气 阻力 等 。 


此 外 ，cp .space 还 提供 了 staticBody 变 量 ， 如 14.3.2 节 介绍 的 那样 ， 你 可 以 直接 使 用 此 值 
而 不 需要 自己 去 创建 静态 刚体 。 


下 面 我 们 来 关注 下 cp .space 类 对 刚体 、 形 状 以 及 约束 的 管理 接口 。 


添加 接口 的 代码 如 下 : 

1 // 注意 ， 你 不 能 添加 静态 刚体 到 space 当 中 

2 space.addBody (body); // 添加 [刚体 ] 

3 space.addShape (shape); // 添加 [形状 ] 

4 space.addStaticShape (shape); // 添加 [静态 形状 ] 
5 space.addConstraint (constraint);// 添加 [约束 ] 

移 除 接口 的 代码 如 下 : 

1 // 注意 , 移 除 刚体 时 ， 你 必须 先 把 刚体 相关 的 形状 和 约束 移 除 
2 space.removeBody (body); 

3 space.removeShape (shape); 

4 // 同样 ， 你 也 可 以 使 用 space.removeShape 来 移 除 静态 形状 
5 space.removeStaticShape (shape); 

6 space.removeConstraint (constraint); 
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查询 接口 的 代码 如 下 : 


space.containsBody (body); 
pace.containsShape (shape); 
space.containsConstraint (constraint); 


遍历 接口 的 代码 如 下 ， 注 意 不 要 在 遍历 时 做 添加 或 删除 操作 : 


1 space.eachBody (func); 
2 space.eachShape (func); 
3 space.eachConstraint (func); 


cp.Space 还 拥有 一 些 与 碰撞 检测 或 者 查询 相关 的 接口 , 碰撞 检测 相关 的 接口 , 如 下 所 示 ( 具 
体 见 14.7 节 ): 


pace.useSpatialHash (dim, count); 

pace.setDefaultCollisionHandler (begin,preSolve,postSolve, separate); 
pace.addCollisionHandler(a, b, begin,preSolve,postSolve,separate); 
pace.removeCollisionHandler(a, b); 

pace.lookupHandler (a, b); 

pace.addPostStepCallback (func); 


相关 接口 如 下 (具体 见 14.8 节 ): 
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space.pointQuery (point, layers, group, func); 
space.pointQueryFirst (point, layers, group); 
space.nearestPointQuery (point, maxDistance, layers, group, func); 
space.nearestPointQueryNearest (point, maxDistance, layers, group); 
space.segmentQuery (start, end, layers, group, func);} 
space.segmentQueryFirst (start, end, layers, group); 
Space .bbouery (bb, layers, group, func);} 
space.shapeQuery (shape, func);} 


om 忆 w 哺 


14.7 ”碰撞 检测 


碰撞 检测 ， 顾 名 思 义 ， 就 是 用 于 检测 刚体 间 是 否 发 生 碰撞 ， 是 物理 引 区 中 非常 重要 的 一 环 ， 
同时 它 涉及 的 算法 也 非常 复杂 。 所 幸 的 是 , 作为 接口 的 使 用 者 , 我 们 并 不 需要 过 多 地 去 担心 这 些 ， 
只 要 知道 如 何 使 用 它们 就 可 以 了 。 本 节 将 对 Chipmunk 中 的 碰撞 检测 进行 探讨 。 


14.7.1 空间 索引 


在 空间 中 ， 如 果 通 过 for 循 环 去 遍历 每 一 个 刚体 是 否 与 其 他 刚体 发 生 碰 撞 ， 运 行 时 间 往 往 是 
不 可 接受 的 ， 所 以 在 碰撞 检测 的 第 一 步 ，Chipmunk 会 使 用 高 层次 空间 算法 来 快速 找 出 哪些 刚体 
彼此 靠近 , 应 该 被 检查 碰撞 。 简 单 来 说 ， 就 是 在 检查 碰撞 前 先 做 一 层 筛 选 ， 能 够 大 大 地 提升 算法 
的 速度 。 目 前 ，Chipmunk 支 持 两 种 空间 索引 ( spatial index ) 方式 : 轴 对 齐 包围 盒 和 空间 散 列 。 
在 默认 情形 下 ，Chipmunk 使 用 的 是 轴 对 齐 包围 盒 作为 空间 索引 方式 ,但 是 如 果 空 间 中 有 许多 大 
小 大 致 相同 的 形状 , 使 用 空间 散 列 将 能 够 提升 碰撞 检测 的 运算 速度 。 下 面 我 们 就 来 看 一 下 如 何 使 
用 空间 散 列 : 
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1 space.useSpatialHash (dim, count); 
其 中 ， 参 数 aim 为 散 列 格 大 小 〈 正 方形 )，count 为 建议 的 最 小 散 列 格 数 目 ，aim 的 推荐 设置 值 是 
所 有 形状 大 小 的 平均 值 ，count 的 推荐 设置 值 为 10 倍 的 形状 数目 ， 你 可 以 从 这 个 设置 开始 调 优 。 
注意 ，qaim 设 置 过 小 会 导致 形状 搬入 到 过 多 的 散 列 格 当中 ， 而 设置 过 大 会 导致 一 个 散 列 格 插入 过 
多 的 形状 ， 均 会 造成 性 能 损失 。 而 count 设 置 过 小 会 造成 过 多 的 误 报 ，count 设 置 过 大 会 导致 浪 
费 过 多 的 高 速 缓存 和 内 存 ， 所 以 你 必须 谨慎 地 设置 这 两 个 值 。 

下 面 我 们 就 来 看 一 下 空间 散 列 的 示例 ,图 14-4 中 的 灰色 正方 形 方块 代表 了 散 列 格 ， 散 列 格 的 
颜色 越 深 就 代表 了 越 多 的 物体 被 映射 到 散 列 格 当 中 《〈 示例 来 自 Chipmunk 官 网 )。 


图 14-4 空间 散 列 示例 
图 14-$ 做 了 一 个 比较 好 的 aim 值 估算 ， 每 个 散 列 格 的 刚体 个 数 较为 均匀 。 


人 


口 
和 


图 14-5 ”gim 值 估算 


图 14-5 使 用 了 过 小 的 aim 值 ， 导 臻 单个 刚体 被 插入 到 过 多 的 散 列 格 当中 。 而 图 14-6 使 用 了 过 
大 的 aim 值 ， 导 致 单个 散 列 格 插入 过 多 的 刚体 ， 将 造成 过 多 不 必要 的 碰撞 检测 。 
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图 14-6 ”使 用 过 大 的 aim 值 


14.7.2 ”碰撞 过 滤 


在 空间 索引 检测 出 彼此 靠近 的 形状 对 后 ， 它 们 将 会 再 执行 一 次 额外 的 筛选 。 在 此 之 前 ， 
Chipmunk 会 先 做 几 个 快速 测试 来 检测 形状 是 否 会 发 生 碰 撞 ， 这 就 是 碰撞 过 滤 〈collision filter )。 
Chipmunk 将 会 做 3 种 碰撞 过 滤 测 试 。 


口 包围 盒 测试 (Bounding Box Test) : 如 果 形 状 的 包围 盒 没 有 重 释 ， 那 么 形状 就 没有 发 生 
碰撞 。 通 常 ， 斜 线 线段 的 包围 盒 会 造成 很 多 误 判 ， 不 过 我 们 并 不 需要 关心 它 。 
口 组 测试 〈Group Test) : 形状 处 于 相同 的 非 零 组 时 ， 将 不 会 产生 碰撞 。 
口 层 测试 〈Layer Test) : 只 有 当 两 形状 的 层 的 与 运算 ( & ) 的 结果 不 为 零 时 ， 才 会 发 生 
磁 撞 。 
我 们 可 以 通过 设置 组 和 层 来 有 选择 地 让 不 同 的 刚体 发 生 碰 撞 或 者 穿 透 ， 下 面 将 逐一 学 习 
它们 。 
口 组 (Group) : 形状 处 于 相同 的 非 零 组 时 将 不 会 产生 碰撞 ， 优 先 级 高 于 层 ， 即 当 形 状 处 于 
不 同 组 别 时 层 碰撞 过 滤 才 会 生效 。 默 认 值 为 cp .NO_GROUP， 即 为 去。 组 可 以 用 来 忽略 复 
共 物 体 不 同 部 分 的 碰撞 ， 比 如 把 手臂 安装 到 身体 上 ， 我 们 想 让 它们 重 受 而 且 不 发 生 碰 撞 ， 
我 们 就 可 以 把 它们 设置 在 同一 个 组 。 
口 层 (Layer) : 只 有 当 两 形状 的 层 的 与 运算 ( & ) 的 结果 不 为 零 时 ， 才 会 发 生 人 碰撞 ， 通 过 
此 值 你 可 以 把 形状 划分 成 不 同 的 类 别 ， 默 认 值 为 cp .ALL_LAYERS， 它 的 所 有 二 进 制 位 均 
为 1， 即 和 所 有 其 他 层 的 物体 都 会 发 生 碰 撞 。 例 如 ， 我 们 有 5 类 物体 一 玩家、 敌人 、 玩 
家 子弹 、 敌 人 子弹 、 墙 。 我 们 的 需求 为 : 玩家 和 玩家 的 子弹 不 发 生 碰 撞 ， 敌 人 和 敌人 的 
子弹 不 发 生 碰 撞 ， 子 弹 间 均 不 发 生 碰撞 ， 除 敌人 外 其 他 同 种 物体 均 不 发 生 碰 撞 ， 墙 与 任 
何 物体 均 发 生 碰 撞 ( 示例 来 自 Chipmunk 官 网 )。 


首先 , 我 们 先 将 除 敌 人 外 的 同类 物体 均 设 置 在 同一 非 零 组 ,， 即 让 除 敌人 外 的 所 有 同 种 物体 间 
均 不 发 生 碰撞 ， 如 表 14-2 所 示 。 


本 
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表 14-2 为 物体 设置 组 
物体 玩家 敌人 玩家 子弹 敌人 子弹 墙 
组 1 0 3 4 5 


然后 将 它们 分 别 部 署 在 不 同 的 层 , 它们 与 的 结果 均 为 零 ， 即 让 不 同 物体 间 均 不 发 生 碰 撞 (二 
进 制 表示 )， 如 表 14-3 所 示 。 


表 14-3 ”为 物体 设置 层 
物体 玩家 敌人 玩家 子弹 敌人 子弹 墙 
层 00001 00010 01000 01000 10000 


然后 根据 我 们 的 需求 做 调整 ,一步 步 开启 不 同 物体 间 的 碰撞 规则 (二进制 表示 )， 如 表 14-4 
所 示 。 


表 14-4 ”调整 后 的 层 
物体 玩家 敌人 玩家 子弹 敌人 子弹 墙 
层 00001 00010 00110 01001 11111 


最 终结 果 为 〈 十 进 制 表示 ) 如 表 14-5 所 示 。 


表 14-5 最终 结果 十进制 ) 


物体 玩家 敌人 玩家 子弹 敌人 子弹 墙 
组 1 0 3 4 5 
层 1 2 6 9 31 


此 时 即 可 达到 我 们 想 要 的 效果 。 


14.7.3 ”碰撞 回调 


前 面 我 们 学 习 了 空间 索引 和 碰撞 过 滤 , 然而 这 些 并 不 足以 让 你 完成 一 个 有 趣 的 物理 游戏 , 很 
多 时 候 你 可 能 需要 在 刚体 碰撞 时 做 一 些 计算 或 者 产生 一 些 效果 , 比如 子弹 打 到 敌人 时 需要 扣除 敌 
人 血 量 , 炸弹 碰 到 地 面 时 需要 产生 爆炸 等 ,这 时 就 需要 碰撞 回调 ( collision callback ) 来 完成 这 些 

Chipmunk 提 供 了 一 组 回调 函数 来 处 理 碰撞 事件 ， 它 们 代表 了 不 同 的 碰撞 阶段 。 要 让 你 的 物 
理 空间 能 监听 物体 碰撞 ， 并 在 碰撞 的 时 候 实 现 对 应 的 逻辑 处 理 ， 需 要 两 个 步 又。 首先 ， 你 需要 给 
当前 的 空间 添加 碰撞 回调 ， 代 码 如 下 : 


1 /7// 加 载 [物理 空间 ] 

2 loadPhysicsSpace : function()f{ 
3 

4 


this.space.addCollisionHandler (121, 212, 
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this.collisionBegin.bind(this), 
this.collisionPre.bind(this), 
this.collisionpPost.bind(this), 
this.collisionSeparate.bind (this) 


FS 0 0 td A 


0} 
其 中 ，121 和 212 表 示 要 监听 的 碰撞 类 型 ( 这 将 在 后 面 进一步 介绍 )， 其 值 可 以 为 Number 或 者 
string 类 型 。 接 着 还 需要 实现 碰撞 回调 的 相关 函数 ， 代 码 如 下 : 


1 // 刚 开始 接触 时 的 回调 

2 collisionBegin : function(arbiter, space)t{ 
3 return true; 

4 |), 

5 // 接触 的 每 次 step 的 回调 

6 collisionPre : function(arbiter, space)t{ 

7 return true; 

8 

9 // 接触 并 且 碰 撞 响 应 已 经 处 理 的 回调 

10 collisionPost : function(arbiter, space)t 
和 

12 // 开始 分 离 的 step 的 回调 

13 collisionSeparate : function(arbiter, space)t{ 


14 } 

下 面 简 要 介绍 一 下 上 述 代码 中 涉及 的 函数 。 

口 collisionBegin(arbiter，space) : 两 形状 刚 开 始 接触 时 的 回调 ， 每 次 接触 只 触发 
该 回调 一 次 ， 返 回 true 会 使 形状 正常 产生 碰撞 。 如 果 返 回 false， 会 使 形状 忽略 碰撞 而 
互相 穿 透 ， 并 且 presolve 和 postSolve 回 调 均 不 会 被 触发 。 

DQ collisionpPre(arbiter, space): 两 形状 接触 的 每 次 step 产 生 回 调 ， 你 可 以 选择 返回 
false 来 忽略 本 次 的 碰撞 ， 或 者 返回 true 使 Chipmunk 正 常 处 理 碰撞 。 并 且 ， 你 还 可 以 在 
此 回调 函数 当中 获取 出 对 应 的 shape， 然 后 调用 cp . De 
和 setElasticity (elasticity) 等 也 数 来 重新 定义 摩擦 系数 和 弹性 系数 等 ， 具体 请 参 
照 14.5 节 。 示 例 代码 如 下 : 


// 接触 的 每 次 step 的 回调 

collisionPre : function(arbiter, space)t{ 
Var ShapeB = arbiter.b; 
shapeB.setElasticity(1.0); 


1 

和 2 

3 

4 

: 

6 var bodyB = arbiter.body_b; 

J bodyB.applyImpulse(cp.v(0, 2000), cp.v(0, 0)); 

8 return true; 

9 a 

D collisionPost (arbiter., Ra 两 形状 接触 并 且 碰 撞 响 应 已 经 被 处 理 ， 也 是 在 两 
形状 接触 的 每 次 step 产 生 回调 。、 意 ，sensor 类 型 的 形状 不 会 触发 此 回调 ， 因 为 它们 从 


来 不 会 进行 碰撞 处 理 。Chipmunk 提 供 此 回调 ， 可 以 方便 我 们 在 每 次 碰撞 响应 处 理 后 计算 


眶 
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冲力 和 动能 ， 方 便 我 们 游戏 计算 碰撞 声音 的 大 小 或 者 碰撞 产生 的 损伤 程度 ， 具 体 请 参照 
14.5 节 。 
口 collisionSeparate(arbiter，space): 两 形状 开始 分 离 的 step 产 生 一 次 回调 。 需 要 
注意 的 是 , 它 和 begin 回 调 是 一 个 回调 对 ， 即 产生 一 次 begin 回 调 ， 必 然 会 产生 一 次 separate 
回调 ， 所 以 形状 在 接触 时 被 移 除 时 也 会 产生 一 次 该 回调 。 
这 4 个 回调 函数 的 参数 均 为 arbiter 和 space ,arbiter 为 cp .Arbiter 的 对 象 , 即 碰撞 对 ( 这 
将 在 14.7.4 节 中 介绍 )，space 为 cp .Space， 即 磁 撞 发 生 的 空间 。 

注意 ， 这 4 个 回调 通常 在 space.step 拯 数 运 行 时 发 生 ， 所 以 你 不 能 在 这 些 回调 中 调用 
addq/zemove 图 数 。 如 果 此 时 有 adaq/zremove 的 需求 ， 应 当 使 用 space .adqdPostStepcallback 
函数 来 处 理 。 例 如 ， 现 在 有 一 个 需求 是 这 样 的 : 当 刚体 的 Y 坐 标 小 于 屏幕 Y 坐 标的 一 半 时 ， 移 除 
掉 当 前 刚体 以 及 形状 ， 实 现代 码 应 该 如 下 : 


1 collisionPre : function(arbiter, space)t 

2 Var ShapeB = arbiter.getB(); 

3 var bodyB = arbiter.body_b; 

4 if (bodyB.getPos().y <= cc.winSize.height / 2) { 
5 this.space.addPostStepCallback (function(){ 

6 this.space.removeBody (bodyB); 

于 this.space.removeShape (shapeB); 

8 }.bind (this)); 

9 } 

10 return true; 
让 ， 


adqdPostStepCallback 人 允许 我 们 在 当前 物理 帧 结束 后 执行 一 次 回调 函数 ， 注 意 该 函数 每 次 
注册 都 只 会 执行 一 次 。 此 接口 的 目的 主要 是 让 你 能 够 在 物理 帧 结束 时 安全 地 删除 对 象 。 

接 下 来 ， 我 们 就 来 看 看 在 cp . Space 中 与 注册 和 使 用 这 些 回 调 相 关 的 接口 。 

设置 默认 的 碰撞 回调 函数 ， 这 些 函 数 将 会 接收 空间 内 所 有 碰撞 所 产生 的 回调 ， 代 码 如 下 : 

1 space.setDefaultCollisionHandler (begin, preSolve, postSolve, separate); 

添加 两 个 类 型 的 碰撞 回调 函数 ， 这 些 函 数 只 会 接收 碰撞 类 型 a 和 碰撞 类 型 p 碰 撞 时 产生 的 回 
调 ，a 和 pb 可 为 Number 类 型 ， 也 可 以 为 string 类 型 。 接 口 如 下 : 

1 space.addCollisionHandler(a, b, begin, preSolve, postSolve, separate); 

如 果 设 定 a 的 值 为 10086、b 的 值 为 10010, 并 且 物 理 空间 ( space ) 中 有 个 shapeA 和 shapeB， 
它们 的 碰撞 类 型 分 别 10086 和 10010 ,那么 , 当 shapeA 和 snapeB 产 生 碰 撞 时 , 便 会 触发 preSolve、 
postSolve 和 separate 回 调 函 数 。snape 的 碰撞 类 型 可 以 通过 如 下 方式 设 定 ， 其 中 type 的 值 对 
应 a 或 p: 

1 shape.setCollisionType (type); 

移 除 两 形状 的 碰撞 回调 ， 代 码 如 下 : 


1 space.removeCollisionHandler(a, b); 
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查找 两 形状 的 碰撞 回调 句柄 ， 如 果 找 不 到 ,， 则 会 返回 默认 的 回调 函数 句柄 。 返 回 的 变量 类 型 
为 CollisionHandler, 它 拥 有 begin、preSolve、postSolve 和 separate 这 4 个 变量 ,它们 


分 别 保存 了 对 应 的 4 个 回调 函数 ， 代 码 如 下 : 


1 space.lookupHandler (a, b); 


14.7.4 ”碰撞 对 
在 前 面 的 章节 中 ， 我 们 多 次 接触 到 cp .Arpbiter 类 ， 下 面 我 们 就 来 学 习 一 下 它 。 


cp.Arbiter 是 Chipmunk 用 于 处 理 磁 撞 检测 的 一 个 重要 的 类 ，Chipmunk 不 允许 我 们 创建 该 
类 , 但 是 从 前 面 的 章节 中 可 以 看 到 ,我们 有 许多 种 方式 来 获取 它 。 它 包含 了 许多 重要 的 碰撞 检测 
相关 信息 ， 下 面 我 们 来 看 看 它 都 拥有 哪些 接口 (arbitet 为 cp .Arbiter 类 的 对 象 ， 下 同 ): 


// 获取 形状 a 
arbiter.getA(); 
// 获取 形状 b 
arbiter.getB(); 
// 返回 Array 类 型 ， 包含 了 形状 a 和 形状 b 
arbiter.getShapes () ; 


下 面 的 接口 均 为 计算 并 返回 对 应 结果 的 接口 , 只 有 在 postSolve 回 调 、poststepCcallback 
回调 和 body .eacharbitez 的 回调 函数 中 使 用 才能 得 到 正确 的 结果 
/7 计算 碰撞 对 的 总 冲力 


arbiter.totalImpulse(); 

// 计算 包括 摩擦 力 在 内 的 碰撞 对 的 总 冲力 
arbiter.totalImpulseWithFriction(); 
// 计算 总 的 能 量 丢失 的 数值 
arbiter.totalKE(); 


ONODPp 


OAODODPp 


14.8 ”查询 


有 时 候 我 们 需要 知道 在 某 个 点 、 某 条 路 径 或 者 某 个 区 域内 是 否 有 刚体 的 存在 , 这 时 就 需要 用 
到 查询 (query )。 注 意 ， 每 个 查询 都 会 让 你 传人 想 要 查询 的 组 和 层 ， 如 果 不 想 做 过 滤 ， 可 是 把 组 
设置 为 cp .NO_GROUP， 层 设置 为 cp .ALL_LAYERS。 


14.8.1 点 查询 
点 查询 的 相关 接口 如 下 : 


// 点 查询 ， 并 在 该 点 的 所 有 形状 逐一 产生 一 次 回调 func (shape) 

space.pointQuery (point, layers, group, func); 

// 点 查询 ， 但 只 返回 查询 到 的 第 一 个 形状 ， 查 询 不 到 时 返回 null 

space.pointQueryFirst (point, layers, group); 

// 最 近 点 查询 ， 也 可 以 称 作 圆 查询 ， 它 以 point 为 圆心 ， 以 maxDistance 为 半径 查询 所 有 的 形状 并 逐一 产 
// 生 一 次 回调 func (shape) 


Un 性 wmN 情 
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6 
2 
8 


DP 


space.nearestPointQuery (point, maxDistance, layers, group, func); 
// 最 近 点 查询 ， 但 是 只 返回 查询 到 的 第 一 个 形状 的 NearestPointoueryInfo 结 构 
space.nearestPointQueryNearest (point, maxDistance, layers, group); 


此 外 ， 我 们 还 可 以 通过 调用 cp. Shape 的 查询 函数 对 单个 形状 进行 点 查询 : 


// 点 查询 ， 当 形状 在 该 点 上 时 返回 NearestPointQueryInfo 结 构 ， 不 在 时 返回 null 
shape.pointQuery (p); 

// 点 查询 ， 返 回 NearestPointQueryInfo 结 构 
shape.nearestPointQuery (p); 


NearestPointoueryInfo 结 构 的 属性 如 下 : 


a 
2 
3 


14.8.2 


info.shape; // 形状 


info.p; // 形状 上 距离 查询 点 最 近 的 点 
info.d; // 到 查询 点 的 距离 ， 当 查询 点 在 形状 内 部 时 ， 该 值 为 负 
线段 查询 


线段 查询 的 相关 API 如 下 : 


1 


3 


// 线段 查询 , start 和 end 为 查询 的 线段 的 起 点 和 终点 , 查询 到 的 所 有 形状 逐一 产生 一 次 回调 func (shape) 
space.segmentQuery (start, end, layers, group, func);} 

// 线段 查询 ， 但 是 只 返回 查询 到 的 第 一 个 形状 的 SegmentOueryInfo 结 构 
space.segmentQueryFirst(start, end, layers, group); 


我 们 还 可 以 通过 调用 cp . shape 的 查询 函数 对 单个 形状 进行 线段 查询 : 


1 


shape.segmentQuery (a, b); 


其 中 ，a 和 D 为 查询 线段 的 起 点 和 终点 ， 函 数 将 返回 SegmentQoueryInfo 结 构 ， 当 形状 与 线段 不 
相交 时 返回 nul1l。 


SegmentoueryInfo 结 构 体 的 源码 如 下 : 


RODP 


var SegmentQueryInfo = function(shape, t, n)t{ 
this.shape = shape; 
this.t = t; 
this.n = n; 


二 


其 中 t 表 示 线 段 查询 的 归 一 化 距离 ， 在 [0, 1] 范 围 内 ， 即 被 命中 位 置 在 查询 线段 起 点 和 终点 的 百 分 
比 位 置 ， 如 有 果 线 段 查询 起 点 在 形状 内 部 ， 此 值 为 0。n 为 命中 点 的 法 向 量 ， 如 果 线 段 查 询 起 点 在 形 
状 内 部 ， 此 值 为 cp .vzero。 


14.8.3 ”区 域 查询 
区 域 查询 的 相关 API 如 下 : 


心 ON 情 


// ARABB 查 询 ，bb 为 cp .BB 类 型 ， 查 询 到 的 所 有 形状 逐一 产生 一 次 回调 

Space .bbouery (bb, layers, group, func); 

// 形状 重合 查询 ，shape 为 Cp.Shape 类 型 ， 在 查询 到 的 所 有 形状 逐一 产生 一 次 回调 
space.shapeQuery (shape, func); 
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14.9 实例 一 一 拖 动 刚体 的 实现 


拖 动 指 的 是 抓 住 物体 的 某 一 点 , 以 这 一 点 作为 托 动力 的 作用 点 , 物体 会 在 托 动力 的 作用 下 产 


生 人 位移、 旋转 等 ， 这 和 Cocos2d-JS 中 通过 解 摸 王 


和 件 移 动 普通 精灵 有 所 不 同 。 下 面 我 编写 


Wh 
个 实 


( 本 实例 见 随 书 源码 src/unit14_chipmunk )， 在 这 个 实例 中 有 一 个 刚体 ， 你 可 以 拖 动 此 刚体 ,但 
不 能 让 此 刚体 磁 到 物理 空间 的 边缘 ,如若 磁 到 , 则 会 删除 此 刚体 、 刚 体 的 形状 以 及 与 刚体 绑 定 在 
一 起 的 精灵 。 


首先 ， 我 定义 了 一 个 Layer， 在 这 个 Layer 下 新 建 一 个 物理 


1 
2 
3 
4 
5 
6 
2 
8 
9 


// 加 载 [物理 空间 ] 
loadPhysicsSpace : 
this.space = 


this.space.gravity 


Var thickness = 


100 


function(){ 

new cp.Space(); 
Gp: vl 
this.space.sleepTimeThreshold 


= 909 
-性 


// 创建 
// 设置 
// 设置 


’ 
’ 


> // 物理 空间 围墙 厚度 


空间 ， 代 码 如 下 : 


物理 空间 
物理 空间 重力 ] 
睡眠 检测 临界 值 ] 


var staticBody = this.space.staticBody; // 创建 [静态 刚体 

Var walls = [ 
new cp.SegmentShape(staticBodqy，cp.v( -thickness，-thickness)，cPp.V 
(cc.winSize.width，-thickness)，thickness)， // 底部 
new cp.SegmentShape(staticBodqy，cp.v(-thickness，-thickness)，cPp.V 
(-thickness, cc.winSsize.height), thickness), // 左边 
new cp.SegmentShape (staticBody, cp.v(cc.winSize.width + thickness, 
-thickness), cp.v(cc.winSize.width + thickness, cc.winSize.height), 
thickness ) ， // 右边 
new cp.SegmentShape (staticBody, cp.v(-thickness, cc.winSize.height + 


thickness), 
thickness) 
区 
// 创建 [围墙 ] 
for(var i = 0; 


Var Shape = 


shape.setElasticity(0.5); 


cp.v(cc.winSize.width， 


// 顶部 


i < walls.length; 


walls[il]; 


shape.setFriction(0); 
shape.setCollisionType (this.collisionType.walls); 


this.space.addStaticShape (shape); 


} 


// 添加 [碰撞 监听 ] 


i++){ 


// 设置 [围墙 的 弹性 系数 ] 
// 设置 [围墙 的 摩擦 力 ] 


// 添加 [ 


围墙 到 物理 空间 中 ] 


cc.winSize.height + thickness) ， 


this.space.adqddqCcollisionHandler( 


this. 
this. 
this. 
this. 
this. 
this. 


collisionType.walls, 
collisionType.tapBody, 
collisionBegin.bind(this), 
collisionpre.bind(this), 
collisionPost.bind(this), 
collisionSeparate.bind(this) 


例 


日 
全 
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在 第 7 行 代码 中 ， 我 定义 了 一 个 thickness 变 量 ， 用 来 表示 物理 空间 围墙 的 厚度 。 实 际 上 ， 
它 的 值 为 0 也 是 可 以 的 ,但 是 如 车 刚体 的 运动 速度 过 快 ， 可 能 会 导致 刚体 穿 过 围墙 ,这 显然 是 你 
所 不 愿意 看 到 的 效果 ， 那 么 将 围墙 的 厚度 设置 宽 一 点 是 一 种 解决 方案 。 

在 第 21 行 代码 中 ， 我 设置 了 围墙 的 碰撞 类 型 为 this.collisionType.walls。 实 际 上 ， 
this.collisionType 是 一 个 空 对 象 , 它 用 来 模拟 枚 举 。this.collisionType.walls 的 值 为 
String 类 型 ， 除 了 walls 之 外 ,我 还 为 this.collisionType 对 象 定 义 了 tapBody 成 员 ， 用 来 
表示 本 实例 中 要 拖 动 刚体 的 形状 的 碰撞 类 型 ， 代 码 如 下 : 


1 // 加 载 [配置 ] 

2 loadConfig : function(){ 

3 this.collisionType = {}; 

4 this.collisionType.walls = "walls"; 

5 this.collisionType.tapBody = "tapBody"; 
6 J} 


最 后 ， 在 第 25 行 到 第 33 行 代码 中 ， 我 给 磁 撞 类 型 为 this.collisionType.walls 和 
this.collisionType.tapBody 的 形状 添加 了 碰撞 监听 ， 这样 当 这 两 个 形状 发 生 碰 撞 时 ， 我 们 
便 可 在 碰撞 的 回调 函数 中 移 除 掉 对 应 的 刚体 、 形 状 以 及 和 刚体 绑 定 的 精灵 。 

接 下 来 , 我 封装 一 个 可 以 拖 蝶 的 物理 精灵 类 , 它 继承 自 cc .Physicssprite, 我 将 它 命名 为 
MousePhysicsSprite。 在 MousePhysicsSprite 类 中 , 我 为 它 定 义 了 3 个 成 员 属性 ,并 且 注 册 
了 触摸 事件 ， 相 关 代码 如 下 : 


1 var MousePhysicsSprite = cc.PhysicsSprite.extend(t{ 

2 space : null, // 物理 空间 引用 

3 mouseBody : null, // 鼠标 刚体 

4 pivotJoint : null, // pivot 关 节 

5 ctor : function(fileName, rect){ 

6 this. super (fileName, rect); 

7 // 注册 [事件 ] 

8 this.registerEvent (); 

9 7 

10 onEnter : function(){ 

11 this._ super(); 

12 this.space = this.getBody() .space; 

13 }, 

14 // 注册 [事件 ] 

5 registerEvent : function(){ 

16 this.cardTouchListener = cc.EventListener.createl(t{ 
I event : cc.EventListener.TOUCH ONE BY_ONE, 
18 swallowTouches : true, 

19 onTouchBegan : this.onTouchBegan, 

20 onTouchMoved : this.onTouchMoved, 

21 onTouchEnded : this.onTouchEnded, 

22 onTouchCancelled : this.onTouchCancelled 

23 人 

24 cc.eventManager.addListener (this.cardTouchListener, this); 
5 } 
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在 上 述 代码 中 ,成 员 属 性 space (第 2 行 ) 指向 物理 空间 ，mouseBody (第 3 行 ) 表示 鼠标 刚 
体 。 需 要 注意 的 是 ，Chipmunk 中 只 有 刚体 和 静态 刚体 这 两 种 刚体 ，mouseBody 实 际 上 是 一 个 静 
态 刚 体 ， 只 是 我 将 它 称 为 鼠标 刚体 。 另 外 的 pivotJoint 为 Pivot 类 型 的 关节 约束 。 

第 8 行 代码 给 MousePhysicssprite 注 册 了 触摸 事件 ， 第 22 行 代码 为 触摸 事件 的 
onTouchCancelled 回 调 , 此 回调 一 般 在 触摸 事件 失去 焦点 的 时 候 被 触发 到 , 例如 设备 接 到 电话 
打 和 等， 如 背 不 实现 onTouchcancelled 回 调 ， 则 此 示例 会 造成 bug 产 生 。 

接 下 来 , 我们 来 看 看 触摸 事件 相关 回调 函数 的 实现 ， 这 也 是 本 示例 的 核心 。onTouchBegan 
的 实现 代码 如 下 : 


1 onTouchBegan: function (touch, event) { 

2 var target = event .getCurrentTarget (); // 获取 [当前 事件 源 ] 
3 var position = touch.getLocation(); // 获取 [触摸 点 位 置 ] 
4 var locationInNode = target.convertToNodeSpace (position); 

3 Var size = target.getContentSize(); 

6 Var rect = cc.rect(0, 0, size.width, size.height); 

7 if (!(cc.rectContainsPoint (rect, locationInNode))) { 

8 return false; 

9 


} 


var mouseBody = new cp.StaticBody (); // 创建 [静态 刚体 ] 
mouseBody .setPos (cp.v(position.x, position.y));// 设置 [刚体 坐标 ] 

Var joint = new cp.PivotJoint (target.getBody(), mouseBody, cp.v(position.x, 
position.y)); 

target.space.addConstraint (joint); // 添加 [约束 ] 

target .mouseBody = mouseBody; 

target .pivotJoint = joint; 


return true;} 


} 

第 2 行 到 第 9 行 代码 用 于 判断 触摸 点 是 否 触摸 到 当前 的 精灵 ， 若 没 触摸 到 ， 则 返回 。 

第 11 行 代码 创建 了 一 个 静态 刚体 ， 也 就 是 前 面 我 所 说 的 鼠标 刚体 。 通 过 改变 它 的 坐标 ,再 为 
它 和 要 拖 动 的 刚体 加 上 Pivot 关 节约 束 , 便 可 实现 鼠标 拖 动 刚体 的 效果 。 在 第 13 行 代码 中 , 我 创建 
出 了 Pivot 类 型 的 关节 约束 ， 这 个 约束 作用 在 MousePhysicsSprite 的 刚体 ( target. 
getBody () ) 和 鼠标 刚体 上 (mouseBody )， 并 在 第 14 行 代码 中 将 此 约束 添加 到 物理 空间 space 
中 去 。 而 第 15 行 和 第 16 行 代码 则 让 MousePhysicsSprite 类 的 成 员 属 性 mouseBody 和 
pivotJoint 分 别 指向 对 应 的 刚体 和 约束 , 这 两 个 成 员 属性 在 后 面 的 onTouchMove 等 也 数 中 也 会 
用 到 。 下 面 我 们 来 看 看 onTouchMoved 了 哨 数 的 实现 ， 具 体 如 下 : 


onTouchMoved : function (touch, event) { 
Var target = event .getCurrentTarget (); 
if(target.mouseBody) { 
Var position = touch.getLocation(); 


出 
2 
3 
4 
5 target .mouseBody.setPos (cp.v(position.x, position.y)); 
6 
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可 以 看 到 ，onTouchMoved 函 数 内 部 的 实现 比较 简单 ， 实 际 上 ， 它 只 做 了 一 件 事 情 ， 就 是 让 
mouseBody 刚 体 的 坐标 始终 为 触摸 点 的 坐标 。 因 为 此 时 space 中 有 了 pivotJoint 约 束 ，pivotJoint 
约束 又 作用 在 鼠标 刚体 和 当前 精灵 所 绑 定 的 刚体 上 , 所 以 当 改 变 鼠 标 刚 体 的 坐标 时 ， 当 前 精灵 所 
绑 定 的 刚体 便 受 到 了 pivotJoint 约 束 的 作用 ， 从 而 产生 了 拖 动 的 效果 。 


最 后 , 在 onTouchEnded 哺 数 内 部 ， 应 该 移 除 掉 pivotJoint 约 束 。 而 onTouchCancelled 也 数 
则 直接 调用 onTouchEnded 函 数 即 可 ,代码 如 下 : 


1 onTouchEnded : function (touch, event) { 

2 Var target = event .getCurrentTarget (); 

3 if(target .mouseBody) { 

4 target.space.removeConstraint (target .pivotJoint); 
与 } 

Gh 

7 onTouchCancelled : function (touch, event) { 

8 Var target = event .getCurrentTarget (); 

9 target .onTouchEnded (touch, event); 

10 } 


至 此 ，MousePhysicsSprite 编 写 完毕 。 接 下 来 , 便 可 以 在 Layer 中 创建 出 可 拖 动 的 刚体 精灵 了 ， 
代码 如 下 : 


1 // 加 载 [ 可 以 抑 复 的 刚体 ] 

2 loadTapBody : function()f{ 

3 var node = new MousePhysicsSprite(res.sh node 128 png); 

4 this.addChild (node); 

5 this.mousePhysicsSprite = node; 

6 

7 var mess = 10; // 质量 

8 Var body = new cp.Body (mess, cp.momentForBox(mess, node.width, node.height)); 
9 this.space.addBody (body); 

10 node.setBody (body); // 精灵 设置 刚体 

二 和 body.setPos(cp.v(cc.winSize.width / 2, cc.winSize.height / 2)); 
12 body.sprite = node; // 给 body 添 加 sprite 属 性 ， 指 向 node 

13 

14 var shape = new cp.BoxShape (body, node.width, node.height); 

15 this.space.addShape (shape); // 物理 空间 添加 形状 

16 shape.setElasticity(0.5); // 设置 [弹性 系数 ] 

17 shape.setFriction(0.5); // 设置 [摩擦 力 ] 

18 shape.setCollisionType (this.collisionType.tapBody); 

19 return body; 

20 } 


上 面 的 代码 可 分 为 3 个 部 分 ,分别 为 创建 刚体 精灵 (第 3 行 到 第 5 行 )、 创 建 刚 体 ( 第 7 行 到 第 
12 行 ) 和 创建 形状 (第 14 行 到 第 18 行 ), 在 第 3 行 代码 中 , 我 创建 出 了 之 前 编写 的 MousePhysics- 
sprite。 特 别 值 得 注意 的 是 第 12 行 代码 ， 我 给 刚体 添加 了 sprite 属 性 ， 让 它 指向 
MousePhysicsSsprite 的 实例 对 象 nodae。 这 样 做 的 目的 是 为 了 在 后 面 的 碰撞 回调 函数 中 获取 出 
疗 撞 刚体 时 ， 可 以 判断 刚体 是 否 有 sprite 属 性 ， 若 有 ， 则 做 删除 操作 。 磁 撞 开 始 接 触 的 逻辑 处 
理 代码 如 下 : 


2 
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1 // 刚 开始 接触 时 的 回调 

2 collisionBegin : function(arbiter, space)t{ 

3 Var bodyArray = []; 

4 bodyArray .push(arbiter.body a); 

5 bodyArray .push(arbiter.body_b); 

6 

7 Var body = null; 

8 for (var i = 0; i < bodyArray.length; i++) { 

9 body = bodyArray [il]; 

10 if (body.sprite === this.mousePhysicsSprite) { 
直下 Var callFunc = function(theBody){ 

12 // 移 除 [Shape] 

13 theBody .eachShape (function(shape)t{ 
14 this.space.removeShape (shape); 
E53 }.bind (this)); 

16 // 移 除 [Body] 

Ly this.space.removeBody (theBody); 

18 // 移 除 [Sprite] 

19 this.removeChild (theBody.sprite); 
20 }.bind(this, body); 

21 // 回调 溃 数 

22 this.space.addPostStepCallback (callFunc); 
2:3 } 

放生 } 

2 return true; 

26 } 


在 上 述 代 码 中 , 第 3 行 到 第 5 行 代码 构建 了 一 个 刚体 数组 来 保存 碰撞 的 两 个 刚体 。 然后 对 这 个 
数组 进行 遍历 ， 这样 做 是 因为 刚体 在 碰撞 的 时 候 , 我 们 并 不 知道 是 pody_a 和 body_p 分 别 指向 哪 
个 刚体 ， 即 无 法 知道 到 底 是 body_a 撞 pody_b， 还 是 body_b 撞 body_a。 为 了 安全 起 见 ， 应 当 都 
对 它们 做 一 个 遍历 。 


在 10adTapBody 函 数 中 ， 我 给 MousePhysicssprite 所 要 绑 定 的 刚体 添加 了 一 个 sprite 属 
性 ， 这 个 属性 便 在 上 面 的 第 10 行 代码 中 起 到 了 作用 。boqy . sprite 等 于 this.mousePhysics- 
Sprite, 那么 此 刚体 便 是 loadTapBody 子 数 中 所 创建 的 那个 刚体 ， 我 们 就 可 以 删除 掉 刚 体 精灵 、 
刚体 以 及 形状 了 。 前 面 说 过 ，collisionBegin 等 4 个 回调 是 在 space. step 函 数 运行 时 发 生 的 ， 
所 以 不 能 在 这 些 回 调 中 调用 adg/remove 也 数 ， 应 当 使 用 space 了 addqPostStepCcallback 国 数 来 
处 理 。space.adqqPostSstepCcallback 国 数 接受 一 个 回调 函数 ， 那 么 在 第 11 行 到 第 20 行 代码 中 ， 
我 定义 了 此 回调 函数 。 值 得 注意 的 是 ， 在 第 20 行 代码 中 ， 我 把 body 传 递 给 cal1lFunc 函 数 。 另 外 
值得 说 明 的 就 剩 下 第 13 行 代码 了 ,你 应 该 知道 了 ,每 个 刚体 上 可 以 添加 多 个 形状 ， 所 以 应 当 将 它 
们 一 一 遍历 出 来 删除 掉 。 


至 此 ， 本 章 实例 结束 ， 你 可 以 运行 随 书 代码 ， 运 行 结果 如 图 14-7 所 示 ， 其 中 ,在 包围 盒 内 部 
的 小 点 为 pivotJoint ， 而 外 部 的 小 点 为 鼠标 刚体 〈 静态 刚体 )。 
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图 14-7 ”实例 运行 结果 


14.10 小结 


通过 本 章 的 学 习 ， 我 们 知道 了 在 Cocos2d-JS 中 文 持 了 两 个 2D 的 物理 引擎 ， 分 别 是 Chipmunk 
和 Box2D。 因 为 在 JSB 上 ，Box2D 还 没有 被 支持 ， 所 以 在 开发 中 ， 我 们 一 般 使 用 Chipmunk 物 理 引 
擎 。Chipmunk 物 理 引 苟 中 有 刚体 的 概念 ， 刚 体 分 为 静态 刚体 和 动态 刚体 。 此 外 ， 在 刚体 上 可 以 
添加 形状 等 ， 形状 分 为 圆 形 、 线 段 、 同 多边形， 形状 上 还 可 以 设置 摩擦 系数 和 弹性 系数 等 。 除 了 
刚体 和 形状 外 ，Chipmunk 中 提供 了 各 种 各 样 的 约束 ， 我 们 可 以 通过 这 些 约束 模拟 出 很 多 效果 ， 
例如 绳子 和 齿轮 等 。 最后， 在 本 章 实例 中 ， 我 们 一 起 完成 了 拖 忠 刚体 的 演示 。 


14.11 参考 资源 


本 章 的 参考 资源 如 下 所 示 。 
口 转动 惯量 : https://zh.wikipedia.org/wiki/ 转 动 惯量 
口 杨 氏 模 量 : https:/zh.wikipedia.org/wiki/ 杨 氏 模 量 
口 库仑 摩擦 力 : http://baike.baidu.com/view/4309065.htm。 
口 动能 定理 : https://zh.wikipedia.org/wiki/ 动 能 定理 。 


加 


网 络 编程 


在 前 面 的 章节 中 ,你 已 经 基本 掌握 了 Cocos2d-JS 的 各 项 技能 ， 单 纯 地 运用 那些 技术 也 足够 开 
发 出 一 款 质 量 不 错 的 单机 游戏 。 但 是 , 随 着 手 游行 业 如 火 如 茶 的 发 展 ， 大 部 分 单机 类 的 游戏 早已 
满足 不 了 玩家 的 内 心 需求 。 网络 游 戏 相 对 于 单机 游戏 而 言 , 可 以 给 玩家 带 来 更 多 的 互动 以 及 乐趣 ， 
维基 百科 对 网 络 游戏 的 定义 是 这 样 的 : 

网 络 游 戏 (英语 : Online Game )， 也 称 “ 在 线 游戏 ”"， 一 般 指 多 名 玩家 通过 计算 机 互联 网 进 
行 交互 娱乐 的 电子 游戏 ， 以 游戏 运行 软件 分 类 , 一 般 包含 客户 端 下 载 的 大 型 多 人 在 线 游戏 ,网 页 
即 开 即 玩 的 网 页 游戏 以 及 社交 网 站 游戏 等 。 部 分 游戏 能 通过 连接 网 络 服务 器 进行 联机 对 战 、 在 线 
云 存 档 。 网 络 游戏 有 战略 游戏 、 动 作 游 戏 、 体 育 游戏 、 格 斗 游戏 、 音 乐 游戏 、 竞 速 游戏 、 网 页 游 
戏 和 角色 扮演 游戏 等 多 种 类 型 ， 不 过 也 有 少数 在 线 网 络 单 人 游戏 。 

本 章 将 围绕 Cocos2d-JS 的 网 络 编程 展开 ,但 是 网 络 编程 所 涉及 的 知识 体系 非常 庞大 。 因 为 篇 
幅 有 限 ， 所 以 本 章 的 知识 点 也 是 有 限 的 , 你 可 以 将 其 作为 一 块 需 门 砖 。 至 于 更 详细 的 网 络 编程 方 
面 的 知识 ， 我 建议 你 去 购买 专业 的 网 络 编程 图 书 或 者 上 网 查阅 相关 的 资料 。 

本 章 内 容 : 

口 网 络 编程 相关 概念 

口 TCP/IP 参 考 模型 

口 基于 HTTP 协 议 的 通信 

口 基于 WebSocket 的 通信 

口 基于 SocketIO 的 通信 

口 实例 一 一 使 用 Node.jst+Socket.IO 实 现 游戏 聊天 系统 


15.1 网 络 编程 相关 概念 
在 正式 学 习 网 络 编程 之 前 ， 首 先 要 了 解 一 下 网 络 编 程 的 一 些 基 础 概念 。 
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OSI 参考 模型 


提 到 网 络 ， 就 不 得 不 提 一 下 OSI 参考 模型 。 在 网 络 开 放 之 初 ， 许 多 大 型 公司 都 有 自己 的 网 络 
技术 。 那 时 的 网 络 没有 一 个 统一 的 规范 ,每 个 公司 都 自己 制定 自己 的 网 络 通信 规则 ,同一 公司 内 
部 的 计算 机 可 以 相互 连接 , 但 是 不 同 公司 的 计算 机 却 无 法 连接 。 为 了 更 好 地 普及 网 络 ， 并 使 网 络 
上 的 机 需 都 能 相互 连接 ， 国 际 标准 化 组 织 (ISO ) 提出 了 这 样 一 个 模型 : OSI 参考 模型 。 

OSI 参考 模型 ， 又 叫做 开放 式 系统 互联 通信 参考 模型 ( Open System Interconnection Reference 
Model, ISO/IEC 7498-1 ), 它 是 一 种 概念 模型 ， 由 国际 标准 化 组 织 (ISO ) 1974 年 提出 ,并 在 1983 
年 正式 启用 ， 是 一 个 试图 使 各 种 计算 机 在 世界 范围 内 互 连 为 网 络 的 标准 框架 。 

OSI 将 网 络 划分 成 7 层 ， 从 下 往 上 分 别 是 物理 层 、 数 据 链 路 层 、 网 络 层 、 传 输 层 、 会 话 层 、 表 
示 层 以 及 应 用 层 ,， 每 个 层 都 有 自己 的 协议 和 功能 ,使 得 数据 可 以 在 不 同 的 系统 、 网 络 之 间 进 行 可 
靠 传 输 ，OSI 的 数据 封装 如 图 15-1 所 示 。 


应 用 层 。 | < 一 一 Hee [oo | 一 一 一 > 应 用 层 

表示 层 < 一 he" [pata | 一 一 一 > 表示 层 

会 话 层 。 | ao pata | 一 一 一 > 会 话 层 

传输 层 | < 一 一 Hub" [oat | 一 一 一 > 传输 层 

网 络 层 -wor Data | | 网 络 层 
Frame 


数据 链 路 层 [| Header Data | 站 人 | 数据 链 路 层 


物理 层 | 一 一 一 一 01000101010011110 一 一 一 > ”物理 层 
pe 十 Data 应 用 层 Data 
第 5 第 7 会 证 层 
层 头 十 层 头 会 话 层 Data 

4 
有 十 层 头 传输 层 Data 
第 3 第 7 = 
层 头 | 十 | 层 头 网 络 层 Ee 
2 
局 | 于 | 于 数据 链 路 层 Data 
第 1 第 7 | 第 6 | 第 5 | 第 4 | 第 3 | 第 2 = 第 1 | 第 2 | 第 3 | 第 4 | 第 5 | 第 6 | 第 7 
层 头 | 十 | 层 头 | 层 头 | 层 头 | 层 头 | 层 头 | 层 头 | Da 物理 层 层 头 | 层 头 | 层 头 | 层 头 | 层 头 | 层 头 | 层 头 ee 


图 15-1 OSI 的 数据 封装 
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在 OSI 网 络 模型 中 ， 数 据 的 传输 方式 是 ， 由 发 送 端 从 上 往 下 传输 ， 在 传输 的 同时 每 一 层 将 会 
对 数据 包 进 行 处 理 封 装 ， 附 带 上 每 一 层 的 数据 头 信息 ， 然 后 再 由 物理 层 发 送 到 接收 端的 物理 层 ， 
再 由 接收 端的 物理 层 从 下 往 上 传递 ， 层 层 解 包 ， 最 后 由 接收 端的 应 用 层 接 收 。 所 以 ， 不 难看 出 ， 
发 送 端 和 接收 端 中 相同 的 层 需 要 处 理 的 数据 是 一 样 的 , 你 可 以 把 发 送 端 和 接收 端 相 同 的 层 之 间 视 
为 拥有 了 一 个 虚拟 的 通路 ， 便 于 你 理解 和 编程 。 

接 下 来 ， 从 下 往 上 简要 看 一 下 各 个 层 的 功能 。 

1. 物理 层 

OSI 模型 的 最 低层 或 第 一 层 ， 该 层 包括 物 理 连 网 媒介 ， 如 电缆 连 线 连接 器 。 物 理 层 (physical 
layer ) 的 协议 产生 并 检测 电压 以 便 发 送 和 接收 携带 数据 的 信号 。 在 你 的 桌面 PC 上 插入 网 络 接口 
卡 , 你 就 建立 了 计算 机 连 网 的 基础 。 换 言 之 , 你 提供 了 一 个 物理 层 , 尽管 物理 层 不 提供 纠 错 服务 ， 
但 它 能 够 设 定数 据 传输 速率 并 监测 数据 出 错 率 。 网 络 物理 问题 ， 如 电线 断 开 ,将 影响 物理 层 。 用 
户 要 传递 信息 ， 就 要 利用 一 些 物理 媒体 ， 如 双 绞 线 、 同 轴 电 缆 等 ,但 具体 的 物理 媒体 并 不 在 OSI 
的 7 层 之 内 ,有 人 把 物理 媒体 当做 第 0 层 。 物 理 层 的 任务 就 是 为 它 的 上 一 层 提供 一 个 物理 连接 ， 以 
及 它们 的 机 械 、 电 气 、 功 能 和 过 程 特性 ， 如 规定 使 用 电缆 和 接头 的 类 型 、 传 送信 和 号 的 电压 等 。 在 
这 一 层 ， 数据 还 没有 被 组 织 ,， 仅 作为 原始 的 位 流 或 电气 电压 处 理 , 单位 是 比特 。 工 作 在 这 一 层 的 
物理 设备 有 网 卡 、 网 线 、 集 线 器 、 中 继 器 、 调 制 解 调 器 以 及 各 种 无 线 、 蓝 牙 技 术 等 。 

2. 数据 链 路 层 

OSI 模 型 的 第 二 层 一 一 数据 链 路 层 ( datalink layer ) 控制 着 网 络 层 与 物理 层 之 间 的 通信 。 它 的 
主要 功能 是 如 何在 不 可 靠 的 物理 线路 上 进行 可 靠 的 数据 传递 。 为 了 保证 传输 ,， 从 网 络 层 接收 到 的 
数据 会 被 分 割 成 特定 的 可 被 物理 层 传 输 的 帧 , 帧 是 用 来 移动 数据 的 结构 包 , 它 不 仅 包括 原始 数据 ， 
还 包括 发 送 方 和 接收 方 的 物理 地 址 以 及 纠 错 和 控制 信息 。 其 中 的 地 址 确定 了 帧 将 发 送 到 何 处 ,而 
纠 错 和 控制 信息 则 确保 帧 无 差错 到 达 。 如 果 在 传送 数据 时 ,接收 点 检测 到 所 传 数据 中 有 差错 ,就 
要 通知 发 送 方 重 发 这 一 帧 。 

数据 链 路 层 的 功能 独立 于 网 络 及 其 节点 和 所 采用 的 物理 层 类 型 ， 它 也 不 关心 是 否 正在 运行 
Word 、Excel 或 使 用 Internet。 它 在 物理 层 提 供 比特 流 服务 的 基础 上 ， 建 立 相 邻 节点 之 间 的 数据 链 
路 ， 通 过 差错 控制 提供 数据 帧 ( frame ) 在 信道 上 无 差错 的 传输 ， 并 进行 各 电路 上 的 动作 系列 。 

数据 链 路 层 在 不 可 靠 的 物理 介质 上 提供 可 靠 的 传输 , 该 层 的 作用 包括 : 物理 地 址 寻 址 、 数 据 
的 成 帧 、 流 量 控制 、 数 据 的 检 错 、 重 发 等 。 

数据 链 路 层 协议 的 代表 包括 : SDLC、HDLC、PPP、STP 、 帧 中 继 等 。 工 作 在 这 一 层 的 设备 
有 网 桥 、 交 换 机 等 。 

3. 网 络 层 

OSI 模型 的 第 三 层 是 网 络 层 (network layer )， 其 主要 功能 是 将 网 络 地 址 翻译 成 对 应 的 物理 地 
址 ， 并 决定 如 何 将 数据 从 发 送 方 路 由 到 接收 方 。 
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网 络 层 通过 综合 考虑 发 送 优先 权 、 网 络 拥塞 程度 、 服 务 质量 以 及 可 选 路 由 的 花费 来 决定 从 一 
个 网 络 中 节点 A 到 另 一 个 网 络 中 节点 B 的 最 佳 路 径 。 由 于 网 络 层 处 理 路 由 ， 而 路 由 器 因为 连接 网 
络 各 段 ， 并 智能 指导 数据 传送 ， 所 以 它 属于 网 络 层 。 

在 网 络 中 ,“ 路 由 ”是 基于 编 址 方案 、 使 用 模式 以 及 可 达 性 来 指引 数据 的 发 送 。 网 络 层 负 
在 源 机 器 和 目标 机 器 之 间 建 立 它们 所 使 用 的 路 由 。 这 一 层 本 身 没 有 任何 错误 检测 和 修正 机 制 ， 
此 ， 网 络 层 必须 依赖 于 端 端 之 间 的 由 DLL 提供 的 可 靠 传 输 服 务 。 

网 络 层 用 于 本 地 LAN 网 段 之 上 的 计算 机 系统 建立 通信 , 它 之 所 以 可 以 这 样 做 , 是 因为 它 有 自 
己 的 路 由 地 址 结构 ， 这 种 结构 与 第 二 层 机 器 地 址 是 分 开 的 、 独 立 的 。 这 种 协议 称 为 路 由 或 可 路 由 
协议 。 路 由 协议 包括 IP、Novell 公 司 的 IPX 以 及 AppleTalk 协 议 。 

网 络 层 是 可 选 的 ， 它 只 用 于 当 两 个 计算 机 系统 处 于 不 同 的 由 路 由 器 分 割 开 的 网 段 这 种 情况 ， 
或 者 当 通信 应 用 要 求 某 种 网 络 层 或 传输 层 提 供 的 服务 、 特 性 或 者 能 力 时 。 例 如 ， 当 两 台 主 机 处 于 
同一 个 LAN 网 段 的 直接 相连 这 种 情况 ， 它 们 之 间 的 通信 只 使 用 LAN 的 通信 机 制 就 可 以 了 ( 即 OSI 
参考 模型 的 一 二 层 )。 

4. 传输 层 

传输 层 (transport layer ) 是 OSI 模 型 中 最 重要 的 一 层 ， 传 输 协议 同时 进行 流量 控制 或 是 基于 
接收 方 可 接收 数据 的 快慢 程度 规定 适当 的 发 送 速 率 。 除 此 之 外 , 传输 层 按 照 网 络 能 处 理 的 最 大 尺 
寸 将 较 长 的 数据 包 进 行 强制 分 割 。 例如， 以 太 网 无 法 接收 大 于 1500 字 节 的 数据 包 。 发 送 方 节点 的 
传输 层 将 数据 分 割 成 较 小 的 数据 片 , 同时 对 每 一 个 数据 片 安排 一 序列 号 ,以便 数据 到 达 接 收 方 节 
点 的 传输 层 时 ， 能 以 正确 的 顺序 重组 ， 该 过 程 被 称 为 排序 。 工 作 在 传输 层 的 一 种 服务 是 TCP/IP 
协议 套 中 的 TCP ( 传输 控制 协议 )， 另 一 项 传输 层 服务 是 IPX/SPX 协议 集 的 SPX ( 序列 包 交 换 )。 

5. 会 话 层 

会 话 层 (session layer ) 负责 在 网 络 中 的 两 节点 之 间 建 立 、 维 持 和 终止 通信 。 会 话 层 的 功能 
括 : 建立 通信 和 链接 ,保持 会 话 过 程 中 通信 和 链接 的 畅通 ,同步 两 个 节点 之 间 的 对 话 ， 决定 通信 和 是否 
被 中 断 以 及 通信 中 断 时 决定 从 何 处 重新 发 送 。 你 可 能 常常 听 到 有 人 把 会 话 层 称 作 网 络 通信 的 “ 交 
通 警 察 ”。 当 通过 拨号 向 你 的 ISP (因特网 服务 提供 商 ) 请 求 连接 到 因特网 时 ，ISP 服 务 器 上 的 会 
话 层 向 你 与 你 的 PC 客户 机 上 的 会 话 层 进行 协商 连接 。 若 你 的 电话 线 偶 然 从 墙 上 搬 孔 脱落 时 ， 终 
端 机 上 的 会 话 层 将 检测 到 连接 中 断 并 重新 发 起 连接 。 会 话 层 通 过 决定 节点 通信 的 优先 级 和 通信 时 
间 的 长 短 来 设置 通信 期 限 。 


转 水 


6. 表示 层 
表示 层 (presentation layer ) 为 应 用 程序 和 网 络 之 间 的 翻译 官 , 这 里 数据 将 按照 网 络 能 理解 的 


方案 进行 格式 化 ， 这 种 格式 化 也 因 所 使 用 网 络 的 类 型 不 同 而 不 同 。 


表示 层 管理 数据 的 解密 与 加 密 ， 如 系统 口令 的 处 理 。 例 如 , 在 Intermet 上 查询 银行 账户 ,使 用 
的 即 是 一 种 安全 连接 。 你 的 账户 数据 在 发 送 前 被 加 密 , 在 网 络 的 男 一 端 ， 表示 层 将 对 接收 到 的 数 
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据 解 密 。 除 此 之 外 ， 表 示 层 协议 还 对 图 片 、 视 频 、 文 本 等 文件 格式 信息 进行 解码 和 编码 ， 例 如 
MPEG 和 JPEG。 

7. 应 用 层 
应 用 层 (application layer ) 负责 对 软件 提供 接口 以 使 程序 能 使 用 网 络 服务 。 术 语 “ 应 用 层 ” 
并 不 是 指 运行 在 网 络 上 的 某 个 特别 应 用 程序 , 应 用 层 提 供 的 服务 包括 文件 传输 、 文 件 管理 以 及 电 
子 邮 件 的 信息 处 理 。 应 用 层 的 协议 有 很 多 ， 常 用 的 有 SMTP 、FTP、HTTP 等 ， 其 中 HTTP 是 手 游 
编程 中 用 得 最 多 的 协议 。 


15.2 TCP/IP 参考 模型 


OSI 参考 模型 是 一 个 理想 的 模型 ， 然 而 它 过 于 庞大 、 复 杂 ， 不 利于 工业 化 普及 ， 所 以 长 期 被 
人 所 诉 病 。 故 此 ， 大 多 的 机 器 使 用 的 却 是 另 一 种 模型 : TCP/IP 参 考 模型 。 

TCP/IP 参 考 模型 不 同 于 OSI 参 考 模型 , 它 是 先 有 了 协议 , 才 制 定 的 模型 , 它 的 概念 划分 远 不 比 
OSI 模型 ， 许 多 的 功能 描述 和 实现 细节 混合 在 一 起 ， 但 是 它 的 普及 度 和 实用 性 却 远 比 OSI 模型 高 。 

TCP/IP 参 考 模型 把 网 络 划 分 成 了 4 层 ， 从 下 往 上 分 别 是 网 络 接 口 层 (link layer )、 网 络 互 连 层 
( internet layer )、 传 输 层 ( transport layer ) 和 应 用 层 ( application layer )。 它 的 应 用 层 对 应 了 OSI 
参考 模型 的 应 用 层 ， 传 输 层 对 应 了 OSI 参考 模型 的 传输 层 ， 网 络 互 连 层 对 应 了 OSI 参考 模型 的 网 
络 层 ， 网 络 接口 层 对 应 了 OSI 参考 模型 的 数据 链 路 层 和 物理 层 ， 它 们 之 间 既 有 联系 又 有 区 别 。 

客户 端 服 务 需 模型 ( client-server model ) 是 经 典 的 网 络 应 用 程序 模型 ， 它 分 为 服务 端 和 客户 
端 两 个 部 分 ,这 种 分 布 式 架构 是 现今 大 部 分 网 络 应 用 程序 的 基础 ， 例 如 网 站 、 网 络 游戏 等 都 采用 
这 种 结构 。 


15.2.1 服务 端 


服务 端 〈server ) 是 一 个 这 样 的 应 用 程序 : 它 等 待 其 他 机 器 〈 即 客户 端 ) 发 送 请 求 并 回应 它 
们 。 服 务 端 的 目的 在 于 处 理 客户 端的 请 求 ， 在 不 同 客户 端 间 分 享 数据 、 软 件 或 硬件 资源 。 对 于 网 
络 游戏 来 说 ,服务 端的 作用 就 是 保存 玩家 信息 ,分 享 其 他 玩家 的 信息 ， 实 现 玩 家 间 的 交互 ,处理 
战斗 数据 、 怪 物 数据 等 。 


15.2.2 ”客户 端 


客户 端 (client ) 或 称 为 用 户 端 ， 是 指 与 服务 器 相对 应 ， 为 客户 提供 本 地 服务 的 程序 。 除 了 
一 些 只 在 本 地 运行 的 应 用 程序 之 外 ， 一 般 安 装 在 普通 的 客户 机 上 ， 需 要 与 服务 端 互 相配 合 运行 。 
目前 ， 网 络 分 为 B/S ( Brower/Server， 即 浏览 器 /服务 器 ) 与 CS ( Client/Server， 即 客户 端 /服务 器 ) 
两 种 架构 ， 但 是 万 维 网 使 用 的 网 页 浏览 器 本 身 其 实 也 是 一 个 客户 端 。 
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游戏 客户 端 展示 游戏 画面 和 游戏 信息 ， 提 供给 玩家 交互 ， 让 玩家 享受 游戏 体验 的 软件 ， 玩 家 
通过 客户 端 输 入 指令 ,客户 端 将 数据 发 送 给 服务 器 ,服务 器 处 理 完 给 出 结果 ,然后 再 由 客户 图 形 
化 出 来 。 可 以 说 ， 客 户 端 是 一 个 玩家 和 服务 器 之 间 的 中 介 ， 使 用 Cocos2d-JS 开 发 的 游戏 其 实 就 是 
属于 游戏 客户 端的 范畴 。 


15.2.3 ”通信 协议 
通信 协议 communication protocol )， 下 面 简称 协议 ， 是 指 双方 实体 ( 客户 端 或 者 服务 端 ) 
完成 通信 或 服务 所 必须 遵循 的 规则 和 和 约定。 协议 定义 了 数据 单元 使 用 的 格式 、 信 息 单元 应 该 包含 


的 信息 与 含义 、 连 接 方式 、 信 息 发 送 和 接收 的 时 序 ， 从 而 确保 网 络 中 的 数据 顺利 地 传送 到 确定 的 
地 方 ， 并 且 被 正确 地 解析 和 处 理 。 


目前 ， 网 络 编程 常用 的 协议 有 HTTP 协 议 、TCP/AP 协 议和 UDP 协议 这 3 种 。 


15.2.4 ”端口 


端口 是 英文 port 的 意译 ， 可 以 认为 是 设备 与 外 界 通信 的 出 口 。 端 口 可 分 为 虚拟 端口 和 物理 端 
口 ， 其 中 虚拟 端口 指 计算 机 内 部 或 交换 机 路 由 器 内 的 端口 , 不 可 见 ， 例 如 计算 机 中 的 80 端 口 、21 
端口 和 23 端 口 等 。 

每 台 设备 在 联网 的 情况 下 都 会 被 绑 定 一 个 特定 的 卫 地 址 , 用 于 在 网 络 世 界 中 作为 识别 设备 的 
唯一 标识 。 如 果 把 下 地 址 比 作 一 间 房 子 ， 端 口 就 是 出 和 人 这 间 房 子 的 门 。 真 正 的 房子 只 有 几 个 门 ， 
但 是 一 个 了 地 址 的 端口 可 以 有 65536〈 即 22 ) 个 之 多 。 端 口 是 通 过 端口 号 来 标记 的 ， 端 口号 只 有 
整数 ， 范 围 是 从 0 到 65535 ( 即 22-1 )。 


15.2.5 URI 


统一 资源 标识 符 ( Uniform Resource Identifier，URI ) 是 一 个 用 于 标识 某 一 互联 网 资源 名 称 的 
字符 串 。 该 种 标识 允许 用 户 对 任何 (包括 本 地 和 互联 网 ) 的 资源 通过 特定 的 协议 进行 交互 操作 。 
URI 由 包括 确定 语法 和 相关 协议 的 方案 所 定义 。 

URI 一 般 由 以 下 3 部 分 组 成 。 

口 主机 名 : 存放 资源 自身 的 名 称 ， 由 路 径 表 示 。 主 机 名 称 除 了 可 以 通过 了 地 址 访问 外 , 还 可 
以 是 网 站 的 域名 访问 ， 例 如 : http:Wwwwbaidu.commes/img/testImage.png， 它 符合 当前 的 
RFC4395 规 范 ( 协议 名 称 :// 域 名 . 根 域名 /目录 /文件 名 .后 弘 ) 即 可 。 

口 标识 符 : 有 的 URI 指 向 一 个 资源 的 内 部 , 这 种 URI 以 # 结 束 , 其 后 跟着 一 个 anchor 标 志 符 ( 称 
为 片段 标志 符 )， 例 如 http://10.1.1.20:3000/a/b.php#a。 其 规范 为 “协议 :// 域 名 /目录 /文件 # 
片段 标识 符 ”。 

口 相对 URI: 相对 URI 不 包含 任何 命名 规范 信息 ， 它 的 路 径 通常 指 同 一 台 机 器 上 的 资源 。 相 
对 URI 可 能 含有 相对 路 径 ( 如 “..” 表 示 上 一 层 路 径 )， 还 可 能 包含 片段 标志 符 。 
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15.3 基于 HTTP 协议 的 通信 

超 文 本 传输 协议 (HTTP，HyperText Transfer Protocol ) 是 互联 网 上 应 用 最 为 广泛 的 一 种 网 络 
协议 ， 所 有 的 WWW 文 件 都 必须 遵守 这 个 标准 。 设 计 HTTP 最 初 的 目的 是 为 了 提供 一 种 发 布 和 接 
收 HTML 页 面 的 方法 。 


15.3.1 运作 方式 


HTTP 协 议 的 CS (〈 客户 端 /服务 器 ) 模式 的 信息 交换 过 程 是 基于 请 求 /响应 范式 的 。 它 分 为 4 
个 过 程 : 建立 连接 、 发 送 请 求 信息 、 发 送 响应 信息 、 关 闭 连接 。 从 这 里 可 以 看 出 网 络 连 接 的 生命 
周期 只 存在 于 一 次 通信 过 程 之 中 , 一 次 通信 结束 后 便 会 断 开 连 接 ， 这 种 连接 方式 称 为 “ 短 连接 ”。 
基于 HTTP 协 议 的 请 求 主要 分 为 get 和 post 两 种 类 型 。 
口 get 请 求 : 一 般 用 于 获取 服务 端 资源 数据 , 并 且 安 全 要 求 相对 较 低 的 情况 , 比如 获取 HTML 
页 面 、JS 文 件 等 。 同 时 ， 可 以 在 请 求 URL 字 符 串 中 将 附加 信息 传递 给 服务 端 ， 但 是 由 于 
URL 的 长 度 限制 ， 附 加 的 数据 只 能 是 微量 的 。 
口 post 请 求 : 一 般 用 于 发 送 数 据 到 服务 端 , 由 于 post 请 求 发 送 的 数据 会 包装 成 一 个 请 求 报 文 ， 
请 求 报 文中 还 会 夹带 请 求 本 身 的 一 些 报 文 头等 其 他 信息 ， 是 相对 比较 安全 的 一 种 请 求 方 
No 
运作 时 ， 游 戏 客户 端 要 通过 Ht tpRequest 对 象 构建 请 求 信息 ， 然 后 创建 一 个 远程 连接 ， 当 
连接 成 功 时 , 便 发 送 请 求 到 指定 的 服务 器 ， 服 务 端 会 在 一 个 特定 的 端口 上 面 进 行 监听 。 当 服务 端 
监听 到 有 HTTP 请 求 到 达 时 , 会 使 用 HTTP 的 协议 规则 对 请 求 信息 进行 解析 , 然后 进行 相关 的 响应 
操作 。 之 后 服务 端 将 处 理 的 结果 发 送 回 游戏 客户 端 。 游 戏 客户 端 从 HttpResponse 对 和 象 中 获取 服 
务 端的 响应 数据 ， 然 后 进行 相关 的 游戏 逻辑 处 理 ， 并 关闭 此 次 连接 。 


15.3.2” xMLHttpRequest 对 象 

在 Cocos2d-JS 中 , 发 送 HTTP 网 络 请 求 时 , 需要 用 到 XMLHEtpRedquest 对 象 。XMLHEtpReduest 
对 象 是 Ajax 的 Web 应 用 程序 架构 的 一 项 关键 功能 ， 它 可 以 同步 或 异步 返回 服务 器 的 响应 ,并 且 能 
以 文本 的 形式 返回 内 容 ， 你 可 以 通过 如 下 代码 获得 XMLHttpRequest 对 象 : 

1 var xhr = cc.loader.getXMLHttpRequest (); 

下 面 简要 介绍 XMLHttpRequest 对 象 的 常用 方法 。 

1. open 函数 

open 函 数 用 于 与 服务 器 连接 并 创建 一 个 新 的 请 求 对 象 ， 其 函数 接口 如 下 : 


1 openl(lmethod, url, async, user, password); 
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可 以 看 到 ， 该 接口 有 5 个 参数 ， 具 


2. send() 函数 


本 如 下 。 


口 method: String 类 型 ,表示 请 求 类 型 ， 其 值 通常 是 GET 或 POST。 
口 url: String 类 型 ， 表示 要 请 求 的 服务 端 URL。 
口 async: Boolean 类 型 的 可 选 参数 ， 表 示 是 否 使 用 异步 连接 ， 默 认 值 为 Lrue。 
Duser: String 类 型 的 可 选 参数 ， 如 果 请 求 需要 用 户 名 ， 可 以 通过 该 参数 指定 。 
口 password: String 类 型 的 可 选 参 数 ， 如 果 请 求 需要 密码 ， 可 以 通过 该 参数 指定 。 


打开 连接 之 后 ， 调 用 sena () 函数 ， 就 可 以 将 构建 好 的 请 求 发 送 到 服务 端 。 


3. abort () 函数 


abort () 函数 用 于 退出 当前 的 请 求 。 


除了 上 面 的 3 个 函数 外 ，XMLHEttpRedaduest 还 提供 了 如 下 属性 。 


1. readystate 属 性 


Tr 


readyState 属 性 用 来 获取 当前 的 状态 , 它 确 保 服务 器 已 经 完成 了 一 个 请 求 。 若 readystate 


属性 的 值 为 4， 则 表示 就 绪 状 态 ， 其 状态 如 表 15-1 所 示 。 
表 15-1 readystate 属 性 值 的 状态 表 
值 说 明 
0 请 求 未 初始 化 (还 没有 调用 open () ) 
1 请 求 已 经 建立 ,， 但 是 还 没有 发 送 (还 没有 调用 send ()) 
2 请 求 已 发 送 ， 正 在 处 理 中 (通常 ， 现 在 可 以 从 响应 中 获取 内 容 头 ) 
3 请 求 在 处 理 中 ， 通常 响应 中 已 有 部 分 数据 可 用 了 ， 但 是 服务 器 还 没有 完成 响应 的 生成 
4 响应 已 完成 ， 可 以 获取 并 使 用 服务 器 的 响应 了 


2. status 属 性 


该 属性 用 于 获取 当前 HTTP 请 求 的 状态 码 ， 其 中 200 表 示 请 求 成 功 ，404 表 示 未 找到 资源 等 ， 


更 多 HTTP 状 态 码 读者 可 以 自行 上 网 搜索 了 解 ， 或 参考 维基 百科 https://zh.wikipedia.org/wiki/HTTP 


状态 码 。 


3. responseText 属 性 


该 属性 可 以 用 于 获取 服务 右 返 回 的 响应 文本 。 


4. onreadystatechange 属 性 


该 属性 为 Function 类 型 的 函数 ， 用 于 设置 请 求 的 回调 函数 。 当 服务 硕 人 处理 状 


自动 调用 。 
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连接 的 方式 在 手机 应 用 中 的 使 用 非常 广泛 ， 这 在 iOS 应 用 开发 中 几乎 随处 可 见 。 而 对 于 游 


戏 应 站 由 于 手机 先天 上 的 不 足 , 手机 端 网 游 在 通信 方面 也 都 设计 得 相对 轻 量 ,大 多 数 情 况 下 可 


人 台 b 
能 只 


是 


用 于 登录 、 发 送 积 分 和 排行 榜 之 类 的 数据 。 所 以 使 用 弱 连 接 是 很 好 的 解决 方案 , 能 够 将 资 


源 合理 地 利用 起 来 。 


下 


oo~QOJDI 忆 PP 必 


在 


函数 。 


第 
以 
1 
修 
1 


运 


面 通过 一 个 示例 ,一 起 来 学 习 下 如 何 使 用 xMLHttpRequest 对 象 进 行 通信 ,相关 代码 如 下 : 


Var xhr = cc.loader.getXMLHttpRequest (); 
// 链接 服务 器 ，UI 格 式 为 : <URL>?Xxxx=xxXX&yyy=yyy 
xhr.open("GET", "http://httpbin.org/get?show env=1", true); 
// 请 求 发 送 
xhr.send(); 
// 回调 场 数 
xhr.onreadystatechange = function () { 
// 请 求 结 
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) { 
cc.1og("Get 请 求 成 功 | ") ; 
(" 请 求 状 态 码 : "，xhr.status); 
cc.1og(" 响 应 状态 : "，xhr.statusText); 
(" 响 应 报 文 : "，xhr.responseText) ; 


} 


上 面 第 3 行 代码 中 ， 我 创建 了 一 个 GET 请 求 ， 服 务 端 使 用 httpbin.org 进 行 测试 ，httpbin.org 


是 一 个 HTTP 客 户 端 测试 服务 端 ， 具 体 参 见 http://httpbin.org。 然 后 在 第 5 行 设置 了 状态 变化 的 回调 


7 行 的 判断 用 于 筛选 处 理 成 功 结束 的 状态 变化 ， 当 条 件 成 立时 , 即 表 示 请 求 被 成 功 处 理 了 。 
上 是 发 送 GET 请 求 的 代码 ， 要 使 用 POST 请 求 ， 只 需要 修改 上 述 第 3 行 代码 即 可 : 

xhr.open ("POST", "http://httpbin.org/post"); 

改 请 求 类 型 后 ， 我 们 在 发 送 数据 的 时 候 将 数据 传递 给 sena () 方 法 ， 相 关 代码 如 下 : 


xhr.send("This is message... (use POST)!"); 


行 上 面 的 代码 ， 可 以 在 Chrome 控 制 台 看 到 GET 请 求 和 POST 请 求 的 返回 结果 如 图 15-2 和 


15-3 所 示 。 
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[A 回 Elements Console Sources Network Timeline Profiles Resources Audits ; Xx 
© 可 <topframe> v DPreserve log 
Cocos2d-JS v3.9 CCDebugger.js? t=1453261690869:;331 
Get 请 求 成 功 ! CCDebugger.js? t=1453261690869:;331 
请 求 状态 码 : 200 CCDebuggqer, js? t=1453261690869:331 
响应 状态 : ”0K CCDebugger, js? t=1453261690869:331 
响应 报 文 : { CCDebuggqer, is? t=1453261690869:331 
"args": { 
"show_env": "1" 
}, 
"headers": { 
"Accept™: "x*/*", 
"Accept-Encoding": "gzip, deflate, sdch", 
"Accept-Language": "sq,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4,zh;q=0.2,zh-TW;q=0.2", 
"pnt "1, 
"Host": "httpbin.org", 
"Origin": "http://localhost:63342", 
"Referer": "http://localhost:63342/Cocos2d-JS/JSBook/index.html", 
"Runscope-Service": "httpbin", 
"User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone 0S 8_0 Like Mac 0S X) 
AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4", 
"X-Forwarded-For": "110.80.1.162", 
"X-Real-Ip": "110.80.1.162" 
in": "110.80.1.162", 
"url": "http://httpbin.org/get?show_env=1" 
> | 
图 15-2 ”控制 台 打 印 出 XMLHttpRequest 的 返回 信息 
区 口 Elements Console Sources Network Timeline Profiles “ Resources Audits ; Xx 
© 可 <topframe> v (Preserve log 
Cocos2d-JS v3.9 CCDebugger, js? t=1453271973654:331 
Get 请 求 成 功 ! CCDebugger. js? t=1453271973654:331 
请 求 状态 码 : 200 CCDebugger.js? t=1453271973654:331 
响应 状态 : ”0K CCDebugger. js? t=1453271973654:331 
响应 报 文 : { CCDebugger, js? t=1453271973654:331 
"args": {}, 
"data": "This is message...(use POST)!", 
"files": {}, 
"form": {}, 


"headers": { 
"Accept": "x*/*", 
"Accept-Encoding": "gzip, deflate", 
"Accept-Language": "sq,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4,zh;q=0.2,zh-TW;q=0.2", 
"Content-Length": "29", 
"Content-Type": "text/plain;charset=UTF-8", 
"Dnt": "1", 
"Host": "httpbin.org", 
"Origin": "http://localhost:63342", 
"Referer": "http://localhost:63342/Cocos2d-JS/JSBook/index.html", 
"User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone 0S 8_0 Like Mac 0S X) 
AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4" 


"json": null, 
"origin": "110.80.1.162", 
"url": "http://httpbin.org/post" 


图 15-3 ”控制 台 打 印 出 xMLHttpRequest 的 POST 返 回信 息 


246 第 15 章 ”网络 编 程 


15.4 ”基于 WebSocket 的 通信 


虽然 现在 的 移动 端 游戏 对 于 网 络 的 要 求 相对 较 低 , 但 是 在 即时 对 战 类 游戏 上 , 难免 需要 进行 
实时 网 络 连接 。 

在 浏览 器 中 通过 HTTP 仅 能 实现 单 工 通信 ， 虽 然 comet ( 基于 HTTP 长 连接 的 “服务 器 推 ” 技 
术 ) 可 以 在 一 定 程度 上 模拟 全 双 工 通信 , 但 效率 较 低 , 并 且 要 求 服务 器 有 较 好 的 支持 。 
协议 是 HTML5 中 一 种 新 的 协议 ， 它 不 仅 可 以 实现 浏览 器 与 服务 器 全 双 工 通信 ( full-duplex )， 还 

能 更 好 地 节省 服务 器 资源 和 带宽 并 达到 实时 通信 的 效果 。 


在 WebSocket API 中 ， 浏 览 需 和 服务 器 只 需要 做 一 个 握手 的 动作 ， 然 后 浏览 器 和 服务 需 之 间 
就 形成 了 一 条 快速 通道 ,两 者 就 可 以 直接 互相 传送 数据 。WebSocket 互 相 沟通 的 header 是 很 小 的 ， 
大 概 只 有 2 字 节 


说 明 在 实现 WebSocket 连 线 的 过 程 中 ， 需 要 通过 浏览 器 发 出 WebSocket 连 线 请 求 ， 然 后 服务 器 
发 出 回应 ， 这 个 过 程 通常 称 为 “握手 ”(handshaking )。 另 外 ，WebSocket 协 议 本 质 上 也 是 
个 TCP 协 议 。 


15.4.1 Cocos2d-JS 中 的 WebSocket 


由 于 浏览 器 的 不 同 ， 其 WebSocket 的 实现 方式 也 不 同 ， 在 Cocos2d-JS 中 可 以 使 用 如 下 代码 获 
得 WebSocket 


1 var Websocket = WebSocket || window.WebSsocket || window.MozWebSocket; 

引入 WebSocket 之 后 ， 便 可 以 创建 WebSocket 实 例 对 象 了 ， 代 码 如 下 : 

1 var webSocket = new WebSocket ("ws://echo.websocket .org"); 

WebSocket 的 构造 方法 有 两 个 参数 , 第 一 个 参数 是 服务 器 的 URL, 第 二 个 参数 是 协议 类 型 ( 可 
省 略 )。"ws ://echo.websocket .org" 是 websocket.org 提 供 的 测试 服务 端 ，URL 中 的 "ws: 6 
标识 是 WebSocket 协 议 ， 与 网 页 连接 的 "http://" 相 似 。 加 密 的 WebSocket 协 议 为 "wss://" 
似 于 "https://"。 


15.4.2 WebSocket 对 象 常用 的 属性 和 方法 
使 用 WebSocket 时 ， 需 要 重 写 以 下 4 个 回调 函数 。 
口 onopen (event ) :WebSocket 在 连接 服务 器 时 , 如果 连 接 成 功 , WebSocket 就 会 调用 onopen 
函数 ， 告 诉 调 用 者 客户 端 到 服务 器 的 通信 链 路 已 经 成 功 建立 ， 可 以 收发 消息 了 。 
口 onmessage (event) : WebSocket 在 得 到 服务 端的 响应 时 ，onmessage 孙 数 会 被 触发 , 该 
函数 的 参数 sevent 包 含 一 个 aata 属 性 ， 里 面 保存 了 服务 端 响应 的 内 容 。 
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口 onerror (event) : 客户 端 发 送 的 请 求 ， 如 果 发 生 错误 ， 就 会 收 到 onerror 消 息 ， 游 戏 
针对 不 同 的 错误 码 会 做 出 相应 的 处 理 
口 onclose (event) : 不 管 是 服务 器 主动 还 是 被 动 关闭 了 WebSocket， 客 户 端 在 收 到 这 个 请 
求 后 ， 需 要 释放 WebSocket 内 存 ， 将 WebSocket 对 象 指 向 nul1。 


在 重 写 以 上 4 个 接口 之 后 ， 便 可 以 开始 发 送 数据 了 。WebSocket 对 象 的 sena ( ) 方法 可 以 携带 
数据 ， 将 其 发 送 往 服务 端 ， 其 代码 如 下 : 

1 webSocket .send(" 这 是 客户 应 发送 的 数据 !"); 

但 是 在 发 送 数 据 之 前 ， 应 该 保证 WebSocket 连 接 已 经 打开 。 通 过 WebSocket 的 readystate 属 
生 可 以 判断 连接 是 否 已 经 打开 ， 相 关 代 码 如 下 : 
if (webSocket .readyState == WebSocket.OPEN) { 

cc.1og(" 连 接 已 打开 ， 可 以 开始 收发 数据 了 。 ") ; 

webSocket .send ("这 是 客户 广发 送 的 数据 !"); 


}else { 
cc.1og(" 连 接 未 打开 | "); 


O 


i 


ORODPp 


} 

除了 文本 之 外 ，WebSocket 还 可 以 发 送 二 进 制 数据 ， 其 接口 与 发 送 文本 一 致 ， 只 是 在 数据 操 
作 上 面 需要 做 相应 的 处 理 。 另 外 , 值得 注意 的 是 ,在 不 需要 连接 的 时 候 一 定 要 将 其 关闭 ,这 可 以 
通过 WebSocket 对 象 的 close 函 数 实现 。 下 面 演示 一 个 示例 。 


首先 ， 构 建 出 WebSocket 对 象 ， 链 接 测试 服务 端 ， 并 重 写 4 个 方法 ， 相 关 代 码 如 下 : 


1 var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket; 
2 var Unit15 NetworkLayer = cc.Layer.extend({ 
3 socket : null, 

4 ctor : function()t{ 
5 this._super(); 
6 this.loadWebSocket (); 

7 ps 

8 loadWebSocket : function(){ 
9 var self = this; 


10 Var Socket = new WebSocket ("ws://echo.websocket .org"); 
11 this.socket = socket; 

2 Socket .onopen = function(event) { // 打开 
13 cc.109 ("连接 成 功 | 开始 发 送 数据 "); 

14 } 

he socket .onmessage = function(event) { // 响应 
16 cc.1og(" 收 到 响应 数据 : "，event .data); 

1 3 

18 socket.onerror = function(event) { // 错误 
19 cc.1og(" 发 生 错误 | ") ; 

2 7 

21 socket .onclose = function(event) { // 关闭 
22 cc.109g ("链接 关闭 | "); 

过 这 self.socket = null; 

24 > 

2 } 
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由 于 网 络 进行 握手 连接 需要 一 定 的 时 间 , 所 以 我 写 了 个 延 时 发 送 数 据 的 动作 。 


在 上 面 第 24 行 代码 的 后 面 ， 具 体 如 下 : 


1 loadWebSocket : function(){ 

2 0 

3 socket.onclose = function(event) { // 关闭 
4 cc.1o09g ("链接 关闭 | ") ; 

3 self.socket = null; 

6 > 

7 

8 

9 


// 延迟 一 段 时 间 之 后 发 送 数据 
var delay = cc.dqelayTime(3) ; 


10 Var callFunc =cc.callFunc (function(){ 

TL if (socket.readyState == WebSocket.OPEN){ 

12 Var strData = "这 是 客户 襄 发 送 的 字符 码 数据 。"; 
13 var arrData = newUintl6Array (strData.length); 
14 for (vari= 0; i < strData.length; i++) { 
ES arrDatal[li] = strData.charCodeaAt (i); 
16 } 

1 socket .send(arrData.buffer); 

18 cc.1og ("数据 发 送 完 毕 !| ") ; 

9 } else { 

20 cc.1og ("连接 未 打开 | ") ; 

21 } 

人 }.bind (this)); 

23 this.runAction(cc.sequence(delay, callFunc)); 

24 } 


这 段 代 码 我 放 


在 上 述 代码 中 ,第 12 行 到 第 16 行 代码 通过 一 个 for 循 环 将 数据 转换 成 对 应 的 字符 码 ， 然 后 保 


存在 arzData 数 组 里 面 。 最 后 ， 第 17 行 代码 将 数据 发 送 到 服务 端 。 


发 送 的 时 候 进行 了 字符 转换 ， 在 接收 的 地 方 也 要 进行 相应 的 操作 。 接 下 来 ， 修 改 


socket .onmessage 国 数 内 的 逻辑 代码 ， 具 体 如 下 : 


1 socket .onmessage = function(event) { // 响应 

Var arrData = new Uint16Array (event.data); 

3 Var data = ""; 

4 for (var i = 0; i < arrData.length; i++) { 

与 if. (arrDatalil 0 

6 data += "\'\\0O\'"; 

7 } else { 

8 Var hexChar = "0x" + arrDatal[li] .toSsString("16") .toUpperCase(); 
9 data += String.fromCharCode (hexChar); 


} 
} 
cc.1og(" 收 到 响应 数据 : "，data); 


OPO 


下 


但 是 运行 修改 后 的 代码 , 你 会 发 现 接收 到 的 数据 并 没有 正确 显示 出 来 。 这 是 因为 发 送 这 种 字 


符 码 数据 ， 需 要 设置 WebSocket 的 binaryType 类 型 的 值 为 arraybuffer， 相 关 代 码 如 下 : 


loadWebSocket : function(){ 
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3 Var socket = new WebSocket ("ws://echo.websocket .org"); 
4 this.socket = socket; 
5 Socket .binaryType = "arraybuffer"; 
6 的 
he 
运行 实例 ，Chrome 控 制 台 的 输出 结果 如 图 15-4 所 示 。 
[ 
民品 Elements Console Sources ” Network » : Xx 
© 定 <topframe> 了 Preserve log 
Cocos2d-JS v3.9 CCDebugger. js:331 
连接 成 功 ! 开始 发 送 数 据 CCDebugger. js:331 
数据 发 送 完毕 ! CCDebugger.is:331 
收 到 响应 数据 : ”这 是 客户 端 发 送 的 字符 码 数据 。 CCDebugger. js:331 
> 


图 15-4 ”WebSocket 实 例 控 制 台 的 输出 结果 


15.5 ”基于 SocketlO 的 通信 


Node.js 提 供 了 高 效 的 服务 端 运行 环境 ,但 是 由 于 浏览 絮 端 对 HTML5 的 支持 不 一 ,为 了 兼容 
所 有 的 浏览 器 , 提供 卓越 的 实时 的 用 户 体 验 ,并 且 为 程序 员 提 供 客户 端 与 服务 端 一 致 的 编程 体验 ， 
于 是 Socket.IO 这 后 了 。 


Socket.IO 是 一 个 开源 的 通信 库 ，Node.js 通 过 它 可 以 实现 WebSocket 服 务 端 ， 同 时 也 提供 客户 
端 JS 库 。 

Socket.IO 支 持 以 事件 为 基础 的 实时 双向 通信 , 它 可 以 工作 在 任何 平台 、 浏 览 器 或 移动 设备 上 。 
SocketIO 解 决 了 实时 的 通信 问题 ， 并 统一 了 服务 端 与 客户 端的 编程 方式 。 启 动 了 socket 以 后 ， 就 
像 建立 了 一 条 客户 端 与 服务 端的 管道 道 ， 两 边 可 以 互通 有 无 。 

Socket.IO 支 持 4 种 协议 一 一 WebSocket 、htmlfile 、xhr-polling 和 jsonp-polling， 它 会 自动 根据 浏 
览 器 选择 适合 的 通信 方式 ， 从 而 让 开发 者 可 以 聚焦 到 功能 的 实现 而 不 是 平台 的 兼容 性 上 ， 同 时 
Socket.IJO 具 有 不 错 的 稳定 性 和 性 能 。 


由 于 Cocos2d-JS 标 准 库 不 包含 SocketIO 网 络 模块 ， 所 以 在 使 用 SocketIO 网 络 模块 之 前 ， 应 该 
在 projectjson 文 件 的 moaules 数 组 中 添加 socketio" 值 ， 相 关 代码 如 下 : 


1 "modules" : ["cocos2d", "socketio"], 


15.5.1 获取 SocketlO 对 象 
首先 ， 你 需要 获得 SocketIO 对 象 ， 代 码 如 下 : 


1 var SocKketIO = SocKketIO | window.io; 
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得 到 SocketIO 之 后 ， 可 以 通过 SocketIO 的 connect () 方 法 创建 SocketIO 的 实例 对 象 ， 并 产生 
一 个 服务 需 连 接 。 

connect (uri，opts) 方 法 可 以 携带 两 个 参数 ， 第 一 个 是 URI 路 径 字 符 串 ， 第 二 个 是 一 个 操 
作 数 集合 ， 示 例 代 码 如 下 : 


1 var sioclient = SocketIO.connect ("ws://tools.itharbors.com:4000", {"force new 
connection" : true}); 


其 中 ws://tools.itharbors.com:4000 是 可 用 于 测试 的 URI。 从 URI 中 可 以 看 出 ，Socket.IO 在 这 里 使 用 
的 也 是 WebSocket 协 议 。 


15.5.2 ”SocketlO 的 常用 方法 

SocketIO 对 象 包含 以 下 几 个 常用 方法 。 

口 on (action, func): 该 方法 用 于 向 SocketIO 实 例 对 象 注册 相关 的 动作 (action )。 这 里 的 
动作 指 的 并 非 Cocos2d-JS 中 的 cc.aAction ， 而 是 一 种 JavaScript 事 件 回调 。 第 一 个 参数 
action 是 动作 名 称 ( 事件 名 称 )， 第 二 个 参数 func 是 对 应 的 动作 回调 函数 。 

口 send (msg) : 该 方法 用 于 发 送 数据 ， 它 接收 一 个 字符 串 作 为 参数 。 

口 emit (action，args1，args2，...): 该 方法 表示 发 送 了 一 个 action 命 令 ， 命 令 是 
字符 串 类 型 的 ,在 另 一 端 接收 时 可 以 这 么 写 : socket .on('action'， function (argsl, 
args2){..} ) 。 这 里 的 args 参 数列 表 是 可 以 传递 function 类 型 的 参数 ， 然 后 在 动作 回调 
里 面 进行 调用 。action 的 名 称 尽量 使 用 全 小 写字 母 ， 否 则 可 能 无 法 被 正确 触发 。 

口 disconnect (): 该 方法 用 于 断 开 当前 连接 。 网 络 连 接 相 对 还 是 比较 消耗 资源 的 ,在 不 需 
要 的 时 候 应 该 断 开 它 ， 比 如 玩家 离线 。 


说 明 使 用 SocketIO 进 行 网 络 连接 时 ,如 果 连 接 创建 成 功 , 会 触发 一 个 动作 名 称 为 connect 的 动 
作 ; 关闭 连接 的 时 候 ， 会 触发 disconnect 动 作 ; 使 用 send() 方 法 发 送 数 据 时 ,会 触发 
message 动 作 ， 该 动作 的 回调 函数 应 该 携带 一 个 参数 ， 该 参数 表示 发 送 的 数据 内 容 。 


15.6 ”实例 一 一 使 用 Node.js+Socket.IO 实现 游戏 聊天 系统 


在 一 些 角色 扮演 类 的 游戏 中 ， 聊 天 功能 可 以 说 是 必 不 可 少 的 。 在 本 章 中 , 我 们 就 一 起 来 开发 
一 个 在 线 聊 天 系统 ,其 中 包含 服务 端 和 客户 端的 代码 实现 。 服 务 端 我 打算 用 Node.js, 这 是 因为 我 
们 可 以 直接 使 用 JavaScript 编 写 服 务 端 代码 。 

在 实例 代码 编写 之 前 , 不 妨 先 来 看 看 实例 编写 完成 之 后 的 效果 , 玩家 吕布 和 貂蝉 在 此 系统 中 
的 对 话 内 容 如 图 15-5 和 图 15-6 所 示 。 
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巍 蝉 [10002] 说 : 阿布 ， 我 电脑 很 卡 ， 你 来 我 家 帮 我 看 下 呐 ? 巍 暗 [10002] 说 : 阿布 ， 我 电脑 很 卡 ， 你 来 我 家 帮 我 看 下 呐 ? 
吕布 [10001] 说 : 电脑 卡 ? 小 意思 ， 不 用 去 你 家 ， 你 上 QQ。 吕布 [10001] 说 : 电脑 卡 ? 小 意思 ， 不 用 去 你 家 ， 你 上 QQ。 
稻 蝉 [10002] 说 : 上 QQ 干 阳 ? 貂蝉 [10002] 说 : 上 QQ 干 联 ? 

吕布 [10001] 说 : 我 远程 帮 你 弄 下 ~ 吕布 [10001] 说 : 我 远程 帮 你 弄 下 ~ 

| 貂蝉 [10002] 说 : 不 用 了 ， 你 就 是 个 程序 员 的 命 ~ | 履 蝉 [10002] 说 : 不 用 了 ， 你 就 是 个 程序 员 的 命 ~ 


发送 发 送 


玩家 ID: 10001 ”玩家 名 字 : 吕布 ”在线 人 数 : 2 玩家 ID: 10002 ”玩家 名 字 : 巍 蝉 在线 人 数 : 2 
图 15-5 ”吕布 聊天 窗口 图 15-6 ”有 狠 暗 聊天 窗口 


15.6.1 Node.js、Express 框架 和 Socket.IO 库 的 安装 

Node.js 是 一 个 采用 C++ 语 言 编写 而 成 的 、 开 放 源 代码 的 、 拥 有 跨 平台 特性 ， 并 且 能 够 运行 
JavaScript 代 码 的 平台 ， 它 支持 Mac OS X、Windows、Linux 等 操作 系统 。 

Express 是 一 套 基于 Node.js 平台 的 快速 、 开 放 、 极 简 的 Web 开发 框架 。 

1. 在 Mac OS X 下 安装 


在 Mac OS X 下 ， 我 借助 Homebrew 工 具 安装 Node.js， 这 意味 着 需要 先 安 装 Homebrew 工 具 。 
该 工具 的 安装 较为 简单 ， 你 可 以 在 http://brew.sh/index.html 中 获取 安装 指令 ， 如 图 15-7 所 示 ， 然 后 
在 终端 中 运行 指令 即 可 。 


攻取 Homebrew 


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mas 


打开 终端 窗口 , 粘贴 以 上 脚本 。 脚本 会 解释 它 的 作用 ， 然 后 在 您 的 确认 下 执行 安装 。 高 级 安 
装 选项 请 看 (需要 10.5) 。 


图 15-7 ”获取 Homebrew 


安装 完 Homebrew 之 后 ， 便 可 在 终端 通过 如 下 命令 安装 Node.js: 
brew install node 
接 下 来 ， 再 运行 如 下 命令 安装 Express: 
npm install express --g 
安装 完成 之 后 ， 继 续 运 行 如 下 命令 来 安装 Socket.IO: 
npm install socket.io --g 
全 部 安装 完成 后 ， 在 Mac OS X 下 ，Node.js 可 以 通过 nodqe 一 -version 命 令 获取 版 本 号 ， 从 
而 验证 是 否 安装 成 功 ， 而 Express 和 SocketIO 在 安装 完成 后 会 直接 给 出 反馈 ， 如 图 1$-8 所 示 。 


AAA 3 
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@e@e® 命 Jeff 一 -bash 一 54x5 
Jeffs-MacBook-pPro:~ Jeff$ node ——version 
Vv5.5.0 


Jeffs-MacBook-Pro:~ Jeff$ 上 四 


©@Oe@e® 食 Jeff 一 -bash 一 54x5 


Jeffs-MacBook-Pro:~ Jeff$ npm instaLL express --g 
/usr/local/lib 


@ ®@ 合 Jeff 一 -bash 一 54x5 
[Jeffs-MacBook-Pro:~ Jeff$ npm instaLL Socket,io --9 
/usr/local/lib 


图 15-8 ”Mac OS X 下 Node.js 、Express 以 及 socket.io 的 安装 验证 


2. 在 Windows 下 安装 


在 Windows 系 统 下 ,首先 需要 去 Node.js 官 re ea, .js 安装 包 , 其 下 载 地 址 为 https://nodejs. 
org/download/。 这 里 我 下 载 的 是 node-v5.5.0-x64.msi 安 装 包 ,双击 打开 它 ， 然 后 一 直 点 击 Next 按 钮 


即 可 ， 如 图 15-9 所 示 。 


烛 \ 


Welcome to the Node.js Setup Wizard 


[a d e The Setup Wizard will install Node.js on your computer. 


Back Next Cancel 


图 15-9 ”Windows 下 的 Node.js 安 装 


同样 ， 你 也 可 以 通过 node --version 指 令 获 取 到 安装 的 Node.js 版 本 。 此 外 ，Express 和 
SocketIO 的 安装 指令 与 Mac OS X 一 致 ， 代 码 如 下 : 


1 npm install express --g 
2 npm install socket.io --g 
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Windows 下 Node.js、Express 以 及 Socket.io 安 装 成 功 验 证 如 图 15-10 所 示 。 


加 CNWindowsNsystem32N\cmd.exe 


园 CN\WindowsNsystem32\cmd.exe 


\AppData\Roaming\npm 


葬 C\Windows\system32\cmd.exe 


\Users\Jeff\AppData\Roaming\npm 


- 


图 15-10 ”Windows 下 Node.js 、Express 以 及 Socket.IO 的 安装 验证 


15.6.2 ”服务 端 开发 


当 Nodejs 等 安装 完毕 之 后 ， 便 可 以 开始 着 手 编写 服务 端 代 码 了 。 此 时 我 在 桌面 上 新 建 一 个 
Chat 文 件 夹 ， 然 后 在 Chat 文 件 夹 中 新 建 一 个 名 字 为 server 的 JavaScript 文 件 ， 最 后 在 WebStorm 中 打 
开 Chat 文 件 夹 ， 如 图 15-11 所 示 。 


@©@e@e@ 
Chat 》 
所] Project 加 四 寺 | 关 ” 及 


Me (~/Desktop/Chat 
到 server.js 
WN External Libraries 


图 15-11 ” Chat 文件 夹 的 目录 结构 


在 serverjs 文 件 中 ， 首先 引入 3 个 模块 ， 分 别 是 sxpress 、http 以 及 socket .io， 然 后 声明 
两 个 变量 来 保存 当前 在 线 玩家 信息 以 及 在 线 人 数 ， 代 码 如 下 : 


var app = require("express") (); // 引入 express 模 块 
var http = require("http") .Server(app); // 引入 http 模 块 
Var io = require("socket.io") (http); // 3 引 socket .io 模块 


var onlineplayers = {}; // 在 线 玩 家 信息 
var onlineCount = 0; // 当前 在 线 人 数 


ODP 
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说 明 ”本章 通过 在 线 聊 天 系统 实例 来 巩固 之 前 所 学 的 知识 点 ， 但 服务 端 知 识 并 不 是 本 章 以 及 本 
书 的 重点 ， 若 你 对 本 实例 的 服务 端 代码 不 理解 ， 也 是 无 妨 的 ， 大 概 懂 它 是 干 嘛 的 即 可 。 


然后 ， 再 编写 一 段 代码 用 来 监听 客户 端的 连接 以 及 3000 端 口 ， 具 体 如 下 : 


/ 监听 连接 
io.on("connection", function (socket) { 
console.1og ("一 个 用 户 连接 了 | ") ; 
的 


http.listen(3000, function()f{ 
console.log("listening on : 3000");，; 
于 人 


oo OUwW 心 WwWN 必 


此 时 ， 打 开 终 端 ( Windows 对 应 命令 行 工具 )， 通 过 如 下 命令 来 启动 服务 端 : 
1 node /Users/Jeff/Desktop/Chat/server.js 


启动 成 功 之 后 ， 可 以 看 到 如 图 15-12 所 示 的 反馈 。 


@Oe@e@ Jeff — node ./Desktop/Chat/server.js — 56x5 
[Jeffs-MacBook-Pro:~ Jeff$ node --version 

v5.5.0 

Jeffs-MacBook-Pro:~ Jeff$ node ./Desktop/Chat/server.js 
listening on : 3000 


图 15-12 ”启动 服务 端 成 功 

此 时 虽然 服务 端 已 经 启动 成 功 , 但 是 我 还 并 未 开始 编写 玩家 登录 、 聊 天 等 逻辑 代码 ， 接 下 来 
就 来 实现 它们 。 

玩家 的 登录 以 及 聊天 等 功能 应 当 放 在 连接 之 后 , 所 以 登录 和 聊天 等 逻辑 代码 我 放 在 io .on 也 
数 中 实现 ， 具 体 如 下 : 


// 监听 连接 
io.on("connect", function (socket) { 
console.1og ("一 个 用 户 连接 了 | ") ; 


socket .on("login", function(obj)t{ 

var data = JSON.parse(obj); // 从 字符 串 中 解析 出 JSON 对 象 

// 将 新 加 入 用 户 的 唯一 标识 当 作 socket 的 名 称 ， 后面 退出 的 时 候 会 用 到 

Socket .name = data.playerId; 

// 检查 在 线 列 表 ， 如 果 不 在 里 面 就 加 入 

if(!onlineplayers.hasOwnProperty (data.playerId)) { 
onlineplayers[ldata.playerId] = data.playerName; 
onlineCount++; // 在 线 人 数 +1 


2 
3 
4 
5 // 监听 玩家 [登录 ] 
6 
7 
8 
9 


} 

var loginData = {onlineplayers : onlineplayers, onlineCount : onlineCount, 
player : data}; 

16 // 向 所 有 客户 端 广 播 用 户 加 入 
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17 io.emit ("login", JSON.stringify(loginData)); 

18 console.log("【" + data.playerName + "】 进 入 了 游戏 | ") ; 

19 pe 

20 

人 2 证 // 监听 玩家 发 布 聊天 内 容 

2 之 socket .on("message"，function(ob]j)( 

23 // 向 所 有 客户 么 广播 发 布 的 消息 

24 io.emit ("message", obj); 

25 var data = JSON.parse (obj); 

26 console.l1log(data.playerName + "说 : " + data.content); 

27 } rs 

28 

29 // 监听 玩家 [退出 ] 

30 socket .on("disconnect", function(){ 

31 // 将 退出 的 用 户 从 在 线 列 表 中 删除 

er if(onlineplayers.hasOwnProperty (socket .name)) { 

33 // 退出 玩家 的 信息 

34 var playerData = { playerId: socket.name, playerName : onlineplayers 
[socket.name]}; 

35 delete onlineplayers[socket .name]; // 删除 玩家 

36 onlineCount--; // 在 线 人 数 -1 

37 

38 var logoutData = {onlineplayers : onlineplayers, onlineCount : 
onlineCount, player : playerData}; 

39 // 向 所 有 客户 功 广 播 用 户 退 出 

40 io.emit ("logout", JSON.stringify (logoutData)); 

41 console.log(playerData.playerName + "退出 了 游戏 "); 

站 22 } 

43 2 

44 }); 


需要 说 明 的 是 ,第 7 行 代码 从 字符 串 中 解析 出 JSON 对 象 。 虽 然 在 Web 中 数据 的 发 送 和 接收 支 
持 Number 类 型 ， 但 是 在 JSB 上 仅 支 持 字符 串 形 式 ， 所 以 在 数据 发 送 之 前 ， 应 当 通 过 
JSON. stringify (obj) 方 法 将 JSON 对 象 转 为 字符 串 ， 然 后 发 送 到 服务 端 。 


至 此 ， 服 务 端 代码 编写 完毕 ， 其 中 你 需要 注意 的 是 一 些 事件 名 称 ， 例如 1ogin、message 以 
及 logout 等 ， 这 些 必须 和 客户 端 一 一 对 应 。 


15.6.3 ”客户 端 开发 


从 图 15-5 可 以 看 出 ， 客 户 端 需要 三 个 Text 来 显示 玩家 ID 、 玩 家 名 字 和 在 线 人 数 ， 中 间 聊 天 记 
录 面 板 为 一 个 ListView， 其 中 的 对 话 内 容 用 Text 表 示 ， 而 在 ListView 下 面 则 是 一 个 TextField 编 辑 框 
和 一 个 “发 送 ” 按 钮 。 我 相信 你 看 完 第 10 章 之 后 ,开发 这 些 UI 控 件 已 不 在 话 下 ， 所 以 这 里 我 不 打 
算 贴 出 UI 的 实现 代码 ， 你 可 以 自己 编写 或 者 打开 随 书 源码 进行 阅读 。 

这 里 重点 来 看 一 下 通信 部 分 ， 代 码 如 下 : 


1 loadSocketIO : function()f{ 
多 Var SocketIO = SocketIO.connect ('127.0.0.1:3000' ); 
3 this .socketIO = socketIO; // 保存 socketIO 
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4 

5 var self = this; 

6 socketIO.on("connect", function(data)t{ 

7 cc.1og ("连接 服务 器 成 功 ..."); 

8 // 发 送 [ 登 录 请 求 ] 

9 SocketIO.emit ('l]login', JSON.stringify(self.playerData)); 

二 0 

11 // 监听 [玩家 登录 ] 

1 socketIO.on('login', function(obj)t{ 

六 var data = JSON.parse (obj); 

14 self.isLogin = true; 

5 self.onlineCountText .setString ("在 线 人 数 : " + data.onlineCount); 

16 cc.1og(" 玩 家 【" + data.player.playerName + "】 进 入 游戏 了 | "); 

Eek 用 

18 

19 // 监听 [玩家 聊天 ] 

20 socketIO.on('message', function(obj)t{ 

2 var data = JSON.parse (obj); 

22 Var string = data.playerName + "[" + data.playerId + "] 说 : " + 
data.content; 

23 self.applyMessageText (string); 

24 下 汉 

25 

26 // 监听 [玩家 退出 ] 

2 socketIO.on('logout', function(obj)t{ 

28 var data = JSON.parse (obj); 

29 self.onlineCountText .setString ("在 线 人 数 : " + data.onlineCount); 

30 cc.1og(" 玩 家 【" + data.player.playerName + "】 退 出 游戏 | "); 

31 J} 

32 的 访 

3 本 可 

第 2 行 代码 创建 了 一 个 连接 ，127.0.0.1 是 服务 器 监听 地 址 ， 这 里 用 本 地 IP。 第 6 行 监听 连接 状 


态 ， 当 连接 创建 成 功 时 ， 便 可 以 发 送 登 录 (login ) 请 求 ， 如 第 9 行 代码 所 示 。 玩 


家 登录 后 ， 服 务 


端 会 通知 其 他 玩家 , 那 客 户 端 自 然 也 需要 实现 玩家 登录 监听 ， 就 像 第 12 行 代码 所 示 。 当 有 玩家 上 
线 后 ,客户 端 需要 更 新 当前 在 线 人 数 以 及 在 线 玩家 的 信息 ， 而 这 些 服 务 端 都 发 送 过 来 了 。 在 第 13 


行 代码 中 ， 我 将 服务 端 发 送 过 来 的 数据 转 为 JSON 对 象 。 在 第 15 行 代码 中 ， 更 新 
线 人 数 的 文本 显示 。 


玩家 之 间 的 聊天 实现 和 登录 功能 类 似 , 第 20 行 代码 实现 了 聊天 信息 的 监听 ， 


了 当前 服务 器 在 


第 22 行 代码 做 了 


一 个 字符 串 处 理 ， 第 23 行 代码 将 处 理 之 后 的 字符 串 创建 为 一 个 Text 对 象 ， 并 添加 到 ListView 中 ， 


实现 代码 如 下 : 
1 // 添加 信息 文本 到 ListView 
2 applyMessageText : function(string)t 
var layout = new ccui.Layout (); 
4 this.listView.pushBackCustomItem(layout); 
3 
6 Var text = new ccui.Text (string, "", 18); 
7 layout.setContentSize(text.getContentSize()); 
8 text.setPosition(layout.width / 2, layout.height / 2); 
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9 layout .addChild (text); 
Or 


在 发 送 消息 功能 上 ， 逻 辑 大 概 是 这 样 的 : 玩家 在 TextField 编 辑 框 中 输入 要 发 送 的 信息 ， 然 后 
点 击 “ 发 送 ”按钮 ， 客 户 端 调用 socketIo.emit 方 法 将 信息 发 送出 去 。 在 这 个 过 程 中 ， 首 先 需 
要 获取 TextField 编 辑 框 中 的 内 容 ， 然 后 在 “发 送 ”按钮 松 开 后 将 消息 发 送出 去 ， 代 码 如 下 : 

// 加 载 [“ 发 送 ”按钮 ] 
loadSendButton : function(){ 
var fileName = "res/unit10 ui/scale9 .png"; 


和 

2 

3 

4 Var node = new ccui.Button(); 
5 this.addChild (node); 
6 

. 

8 

9 


A 
node.addTouchEventListener (function(sender, type) { 
switch (type) { 
case ccui.Widget .TOUCH ENDED: 


0 var message = this.inputText .getString(); 
1 this.onSendMessage (message); 
1 this.inputText .setString(""); // 清空 编辑 框 内 容 
13 break; 
4 } 
5 }.bind(this)); 
6 } 
第 10 行 代码 获取 TextField 中 所 输入 的 内 容 ， 第 11 行 代码 将 信息 发 送出 去 ， 代 码 如 下 : 
1 /1/ 发 送 [ 信 息 ] 
2 onSendMessage : function(message){ 
3 if (!this.isLogin){ cc.log(" 没 有 登录 "); return } 
4 if (!message) { return; } // 空 字符 串 则 不 发 送 
6 Var messageData = { 
2 playerId : this.playerData.playerId, 
8 playerName : this.playerData.playerName, 
9 content : message 
10 3 
11 // 发 送 [ 聊 天 请 求 ] 
12 this.socketIO.emit('message', JSON.stringify (messageData)); 
.3 让 


至 此 ， 整 个 聊天 系统 开发 完毕 ， 启 动 服务 端 之 后 ,运行 多 个 客户 端 , 便 可 实现 聊天 。 当 有 玩 
家 登录 ， 或 者 发 送信 息 等 ,终端 显示 的 日 志 如 图 15-13 所 示 。 


@®@ © @ Jeff—node./Desktop/Chat/server.js — 48x7 


一 个 用 户 连接 了 ! 
【吕布 】 进 入 了 游戏 ! 
一 个 用 户 连接 了 ! 
【貂蝉 】 进 入 了 游戏 ! 
貂蝉 说 : 你 好 ， 小 伙 子 ~ 
人 你 好 * 小 姑娘 ~ 


图 15-13 ”服务 器 终端 显示 
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15.7 小结 


通过 本 章 的 学 习 ， 我 们 学 习 了 网 络 编程 相关 的 基本 概念 以 及 XMLHttpRequest 、WebSocket 
和 SocketIO 的 用 法 。 最 后 ， 在 本 章 的 实例 中 ， 实 现 了 一 个 Node.js + Socket.io 的 在 线 聊天 系统 。 


15.8 ”参考 资源 


本 章 的 参考 资源 为 Node.js : https://zh.wikipedia.org/wiki/Node.js。 


JavaScript Binding 


纵 观 世 上 的 计算 机 主流 语言 ,其 种 类 繁多 , 每 种 语言 都 有 自己 的 优势 和 缺陷 。 编 译 型 语言 虽 
然 拥有 较 好 的 性 能 ,但 是 编写 复杂 。 解 释 型 语言 虽然 灵活 ， 但 是 性 能 往往 稍 有 缺憾 。 在 游戏 开发 
中 ，C++ 往 往 以 其 卓越 的 性 能 和 更 接近 底层 的 特性 成 为 编写 游戏 引擎 的 首选 。 然 而 C++ 虽 拥 有 超 
高 的 性 能 优势 ， 但 相对 脚本 语言 而 言 ， 它 显得 过 于 复杂 和 难于 上 手 ， 开 发 门槛 高 ， 开 发 周期 长 ， 
而 且 很 容易 因为 团队 成 员 水 平 的 参差 不 齐 和 编程 风格 的 过 异 造 成 团队 配合 上 的 困难 。 还 有 最 重要 
的 一 点 ， 那 就 是 C++ 不 支持 热 更 新 "， 这 并 不 适合 目前 国内 的 手 游 环境 ， 所 以 往往 在 游戏 技术 选 
型 阶段 就 被 排除 在 外 。 

所 幸 的 是 ，Mozilla 给 我 们 带 来 了 解决 方案 ， 那 就 是 SpiderMonkey。SpiderMonkey 是 Mozilla 
开发 的 JavaScript 引 擎 ， 使 用 C/C++ 编 写 ， 用 在 多 个 Mozilla 产 品 中 ， 包 括 Firefox 、Thunkerbird 等 。 
SpiderMonkey 为 Cocos2d-x 提 供 了 C++ 调用 JavaScript 的 能 力 ， 使 得 Cocos2d-x 能 够 跟 JavaScript 结 合 
起 来 , 开发 者 便 可 以 使 用 JavaScript 来 编写 游戏 的 业务 逻辑 代码 ,同时 又 不 失去 底层 C++ 引擎 框架 
的 高 性 能 。 更 妙 的 是 , 它 使 我 们 可 以 使 用 同一 份 游戏 代码 ,不 经 修改 就 可 以 跑 在 浏览 器 和 其 他 平 
台 上 ， 这 大 大 地 拓宽 了 游戏 的 运行 场景 和 业务 范围 。 

但 是 ， 这 个 过 程 并 不 是 自动 的 。 要 用 SpiderMonkey 实 现 C++ 调用 JavaScript， 我 们 需要 为 其 编 
写 大 量 的 胶水 层 代 码 ( 即 两 种 语言 可 以 相互 调用 的 中 间 代 码 )， 这 份 工作 不 仅 烦 琐 、 枯 燥 ， 而 且 
工作 量 大 ， 容 易 出 错 。 此 外 ， 一旦 Cocos2d-x 的 接口 有 些许 变化 ， 相 应 的 绑 定 代码 就 得 跟着 改变 ， 
给 维护 工作 带 来 了 相当 大 的 困难 。 

为 了 解决 上 述 问题 ， 时 任 Zygna 工 程 师 的 Rolando Abarca 于 2012 年 主导 并 开发 了 一 套 基 于 
Cocos2d-x 和 SpiderMonkey 的 JavaScript 自 动 绑 定 技术 ， 它 让 我 们 可 以 通过 一 些 简单 的 配置 和 少量 
的 代码 生成 绝 大 部 分 的 胶水 层 代 码 ， 减 少 了 绑 定 上 的 工作 量 ， 也 大 大 改善 了 维护 难度 。 

JavaScript Binding 一 直 是 Cocos2d-JS 团 队 所 引 以 为 豪 的 核心 技术 所 在 ， 本 章 将 围绕 该 技术 展 
开 ， 详解 其 背后 的 原理 ， 并 一 步 一 步 引 导读 者 如 何 绑 定 自己 的 C++ 类 到 JavaScript 中 。 


GD 热 更 新 是 指 不 需要 重新 打包 发 布 到 各 个 渠道 包 ， 直 接 在 游戏 开启 时 判断 版 本 号 ， 然 后 从 服务 端 拉 取 代码 和 资源 进 
行 更 新 操作 。 
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本 章 内 容 : 

口 Cocos 引 擎 中 的 脚本 绑 定 框架 
口 自动 绑 定 

口 深入 探究 绑 定 技术 

口 绑 定 自己 的 C++ 类 

口 实例 一 一 绑 定 SQLite3 


16.1 Cocos 引擎 中 的 脚本 绑 定 框架 


众所周知 ，Cocos 游 戏 引 擎 共有 3 个 主流 分 支 ;: C++、JavaScript 和 Lua。 其 中 ，C++ 为 核心 相 
架 ，JavaScript 和 Lua 通 过 脚本 绑 定 技术 架设 在 Cocos2d-x 之 上 。 图 16-1 为 Cocos 引 擎 脚本 绑 定 框架 
示意 图 。 


HH 


Cocos Game in JavaScript Cocos Game in Lua 


JavaScript API Lua API 
i I 


JS Auto Bindings JS Manual Bindings Js Wrappers Lua Auto Bindings 和 Lua Manual Bindines 是 Lua Scripts 


+ C API for R/W Accessin JS 机 Exer uc 个 个 CG API for R/W Access in Lua 全 Execute 个 
JSVM 二 
SpiderMonkey Lua VM 


Cocos2d-x C++ Engine 


图 16-1 ” Cocos 引擎 脚本 绑 定 框架 示意 图 


如 图 16-1 所 示 ， 可 将 绑 定 框架 分 为 4 层 ， 最 底层 为 C++ 编写 的 Cocos2d-x 游 戏 引 擎 ， 它 将 自己 
实现 的 功能 暴露 出 去 ， 供 上 层 的 脚本 语言 引擎 调用 。 

往 上 一 层 , 是 JavaScript 和 Lua 的 脚本 引擎 , 它 用 来 解析 JavaScript 和 Lua 文 件 。 其 中 ，JavaScript 
绑 定 使 用 的 是 SpiderMonkey 引 擎 ， 它 由 Mozilla 维 护 。SpiderMonkey 是 世界 上 第 一 个 JavaScript 引 
擎 , 也 是 目前 JavaScript 执 行 性 能 最 优秀 的 引擎 之 一 。 脚 本 引擎 提供 了 两 个 重要 的 能 力 : 其 一 是 执 
行 脚 本 的 能 力 ， 它 让 C++ 环境 能 够 像 浏 览 器 一 样 去 解析 并 执行 JavaScript 语 言 ， 其 二 为 它 提供 了 对 
脚本 层 进行 访问 的 CAPI。 毫 无 疑问 ， 对 脚本 层 访问 的 能 力 是 底层 Cocos2d-x 引 擎 到 脚本 层 的 重要 
桥梁 ， 它 让 C++ 水 数 可 以 获取 到 脚本 的 API、 访 问 脚 本 环境 中 的 变量 、 构 造 新 的 对 象 、 主 动 调用 
脚本 层 的 函数 等 。 

再 往 上 一 层 ， 是 脚本 绑 定 层 ， 即 胶水 层 ， 在 Cocos2d-JS 中 称 为 Cocos2d-x JSB， 它 是 JavaScript 
到 Cocos2d-x 引 擎 的 通道 ， 这 一 层 由 三 部 分 组 成 : 自动 绑 定 、 手 动 绑 定 和 纯 脚 本 实现 。 纯 脚本 实现 
用 来 改造 一 些 绑 定之 后 的 API， 并 且 提 供 一 些 不 需要 绑 定 的 API， 使 其 更 适合 脚本 程序 员 的 习惯 ， 
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让 API 变 得 更 加 灵活 、 简 单 。 例 如 ，cc .director、cc.textureCache 等 就 是 对 cc .Director-. 
getInstance()、cc.director.getTextureCache() 的 改造 。 

而 最 上 层 ， 则 为 脚本 游戏 层 ， 它 通过 绑 定 等 一 系列 技术 ， 使 得 开发 者 可 以 使 用 JavaScript 或 
Lua 来 编写 游戏 业务 逻辑 代码 ， 让 游戏 逻辑 开发 绕 过 了 笨重 的 编译 性 语言 ， 过 滤 到 脚本 语言 上 ， 
给 开发 者 带 来 了 更 简单 、 更 快速 的 体验 。 


16.2 ”自动 绑 定 


在 Cocos2d-x 引 擎 的 GitHub 仓 库 里 ， 存 在 一 位 神秘 的 代码 贡献 者 ， 它 的 神秘 在 于 外 界 少 有 人 
知 ， 它 就 是 CocosRobot ( 机 器 人 )， 如 图 16-2 和 图 16-3 所 示 。 实 际 上 ，CocosRobot 是 Cocos 引 擎 团 
队 放 在 Travis CI 上 面 的 一 个 构建 任务 ， 每 当 Cocos 仓 库 有 代码 合并 的 时 候 ， 就 会 触发 这 个 任务 ， 
此 任务 会 将 引擎 组 人 员 提 交 上 来 的 需要 绑 定 的 代码 进行 自动 绑 定 ， 然 后 再 提交 到 GitHub 上 。 


CocosRobot #3 
1,171 commits / 691,399 ++ / 462,881 -- 


NY VI VV NW VY 


图 16-2 ”CocosRobot 账 号 


CocosRobot opened pull request cocos2d/cocos2d-x#14102 
[AUTO][ci skip]: updating cocos2dx_files.json 


1commit with 2 additions and 0 deletions 


CocosRobot opened pull request cocos2d/cocos2d-x#14043 
[ci skip][AUTO]: updating luabinding & jsbinding automatically 


1 commit with 36,678 additions and 131 deletions 


图 16-3 ”CocosRobot 代 码 提 交 记 录 
CocosRobot 的 根基 就 是 自动 绑 定 技术 。 这 里 自动 绑 定 技术 不 仅 完 成 了 Cocos 引 擎 海量 的 API 


自动 绑 定 ， 还 解决 了 每 个 Cocos 引 警 版 本 和 迭代 所 谤 来 的 脚本 绑 定 影响 ， 极 大 地 提高 了 引 警 绑 定 模 
块 的 可 维护 性 和 灵活 性 。 
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除了 CocosRobot 和 引擎 团队 之 外 ， 开 发 者 也 可 以 自由 使 用 自动 绑 定 工具 绑 定 自己 编写 的 C++ 
类 。 自 动 绑 定 技术 降低 了 绑 定 成 本 ， 使 得 一 个 不 懂 绑 定 技术 的 开发 人 员 都 可 以 通过 自动 绑 定 技术 
将 自己 的 C++ 类 绑 定 到 脚本 层 。 


16.2.1 自动 绑 定 简 介 及 其 限制 


Cocos 引 擎 中 的 脚本 自动 绑 定 技术 得 益 于 Bindings Generator， 它 是 一 个 使 用 Python 语言 编写 
的 脚本 工具 ， 位 于 cocos2d-x/tools/bindings-generator 目 录 下 。 
虽然 自动 绑 定 工具 很 强大 ， 但 它 有 以 下 几 个 限制 。 
口 只 能 够 针对 类 生成 缚 定 ， 不 可 以 绑 定 结构 体 、 枚 举 类 型 、 宏 定义 、 突 函数 等 。 
口 不 能 够 生成 纯 虚 类 的 API， 因 为 自动 绑 定 无 法 实例 化 纯 虚 函数 对 象 ， 在 绑 定 层 维护 它 。 
口 如 果子 类 中 重 写 了 父 类 API 的 同时 ， 又 重 载 了 这 个 API， 则 此 API 将 无 法 被 绑 定 。 
口 无 法 绑 定 API 的 参数 或 返回 值 使 用 了 没有 被 自动 绑 定 绑 定 的 类 或 者 结构 体 。 
口 无 法 自动 绑 定 实现 C++ 运行 时 的 回调 函数 。 
因为 自动 绑 定 工具 具有 一 定 的 局 限 性 ， 绑 定 出 来 的 结果 可 能 会 导致 编译 上 或 行为 上 的 错误 ， 
所 以 碰 到 上 面 的 情况 时 ， 需 要 手动 绑 定 。 


说 明 因为 手动 绑 定 将 展开 非常 庞大 的 知识 体系 ， 所 以 本 书 暂 不 讲解 。 


16.2.2 ”配置 绑 定 环境 

前 面 提 到 过 ， 绑 定 框 架 中 有 4 层 ， 最 底层 的 C++ 类 、JavaScript 和 Lua 的 脚本 引擎 、 中 间 的 脚本 
绑 定 层 以 及 最 上 层 的 游戏 脚本 逻辑 。 脚 本 绑 定 层 中 的 绑 定 代码 是 绑 定 工具 自动 生成 的 ， 绑 定 工具 
需要 依赖 其 他 一 些 环境 才能 生成 绑 定 代码 。 接 下 来 ， 就 来 看 一 下 如 何在 Mac OS X 以 及 Windows 
操作 系统 中 配置 绑 定 环境 。 

1. Mac OS X 下 的 环境 配置 

在 Mac OS X 上 ， 绑 定 环境 的 配置 较为 简单 ， 大 部 分 的 步骤 可 以 利用 终端 命令 完成 ， 具 体 有 
如 下 5 步 。 

( 安装 Python 2.7: Mac OS X 系 统 本 身 自 带 Python， 此 处 应 保证 Python 版 本 为 2.7.x， 具 体 可 
参见 本 书 第 2 章 。 

(2) 安装 Pip: 终端 键 人 sudo easy_install pip 后 回 车 。 

(3) 通过 Pip 安 装 Python 依 赖 库 PyYAML: 终端 键入 sudo pip install PyYAML 后 回 车 。 

(4) 通过 Pip 安 装 Python 依 赖 库 Cheetah: 终端 键入 sudo pip install Cheetah 后 回 车 。 

(5) 下 载 Android NDK r9d: 具体 可 参见 第 2 章 。 
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在 Mac OS X 上 ，PyYAML 和 Cheetah 的 成 功 安 装 示意 图 如 图 16-4 和 图 16-5 所 示 。 


Oe 命 Jeff 一 -bash 一 64x22 


[Jeffs-MacBook-Pro:~ Jeff$ sudo pip install PyYAML ] 
The directory '/Users/Jeff/Library/Caches/pip/http' or its paren 
t directory is not owned by the current user and the cache has b 
een disabled, Please check the permissions and owner of that dir 
ectory, If executing pip with sudo, you may want sudo's -H flag, 
You are using pip version 7,.1.0, however version 7.1.2 is availa 
ble, 
You should consider upgrading via the 'pip install --upgrade pip 
”command . 

he directory '/Users/Jeff/Library/Caches/pip/http' or its paren 
t directory is not owned by the current user and the cache has b 
een disabled. Please check the permissions and owner of that dir 
ectory，If executing pip with sudo, you may want sudo's -H flag. 
Collecting PyYAML 

Downloading PyYAML-3.11.tar.gz (248kB) 

100% | OU 249kB 96kB/s 

Installing collected packages: PyYAML 

Running setup.py install for PyYAML 
Successfully installed PyYAML-3.11 
Jeffs-MacBook-Pro:~ Jeff$ 目 


图 16-4 PyYAML 安 装 成 功 示意 图 ( Mac OS X ) 


Oe@Oe@ 命 Jeff 一 -bash 一 64x22 

[Jeffs-MacBook-Pro:~ Jeff$ sudo pip install Cheetah ] 
The directory '/Users/Jeff/Library/Caches/pip/http' or its paren 
t directory is not owned by the current user and the cache has b 
een disabled. Please check the permissions and owner of that dir 
ectory,. If executing pip with sudo, you may want sudo's -H flag. 
You are Using pip version 7.1.0, however version 7.1.2 is availa 
ble. 

You should consider upgrading via the 'pip install --upgrade pip 
”command . 

The directory '/Users/Jeff/Library/Caches/pip/http' or its paren 
t directory is not owned by the current user and the cache has b 
een disabled. Please check the permissions and owner of that dir 
ectory. If executing pip with sudo, you may want sudo's -H flag. 
Requirement already satisfied (use --upgrade to upgrade): Cheeta 
h in /Library/Python/2.7/site-packages 

Requirement already satisfied (use --upgrade to upgrade): Markdo 
wn>=2.0.1 in /Library/Python/2.7/site-packages/Markdown-2.6.2-py 
2.7.egg (from Cheetah) 

Jeffs-MacBook-Pro:~ Jeff$ 目 


图 16-5 ”Cheetah 安 装 成 功 示 意图 ( Mac OS X ) 


2. Windows 下 的 环境 配置 

相 比 Mac OS X，Windows 中 的 绑 定 环境 配置 也 大 同 小 异 ， 具 体 步 又 如 下 。 

(1) 安装 Python 2.7.3 ( 32 位 ) 下载 32 位 的 Python 2.7.3 版 本 ， 双 击 安装 包 开 始 安装 ， 安 装 完成 
后 一 定 记 得 设置 环境 变量 (参见 本 书 第 2 章 )。 其 下 载 地 址 : http:/www.python. Se 
2.7.3/python-2.7.3.msi。 


(2) 安装 Python 依赖 库 PyYAML: PyYAML 的 安装 与 Python 大 同 小 异 ， 只 需 一 直 点 击 “ 下 一 步 ” 
即 可 。 其 下 载 地 址 : http://pyyaml.org/download/pyyaml/PyYAML-3.10.win32-py2.7.exe。 

(3) 下 载 Python 依 赖 库 Cheetah: 下 载 好 后 ， 解 压 到 Python 安装 路 径 下 的 Lib\site-packages 文 件 夹 
中 即 可 。 下 载 地 址 : https:/raw.github.com/dumganharmy old cocos2d-x backup/download/downloads/ 
Cheetah.zip。 


(4) 下 载 Android NDK r9d: 参见 第 2 章 。 
在 Windows 上 ，PyYAML 和 Cheetah 的 成 功 安 


PyYAML-3.10 


Cick the Firish button to exdt the Selup ward 


示意 图 如 图 16-6 和 图 16-7 所 示 。 


主页 共享 查看 
© 3 - 个 下 -Python27，Lib » site-packages 
和 钻 iCloud Drive (M | | | | 
月 下 载 
国 点 面 
等 最 近 访问 的 位 置 


Cheetah _yaml.pyd 


PYTHON 
Powered 


二 库 PyYAML-3 README 
四 视频 .10-py2.7. 
已 .图片 egg-info 
也 文档 
引 迅雷 下 载 
册 音 乐 SS 
5 个 项 目 ”选中 1 个 项 目 


图 16-7 ”Cheetah 安 装 成 功 示 意图 ( Windows ) 


图 16-6 ”PyYAML 安 装 成 功 示 意图 ( Windows ) 
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3. 验证 环境 是 否 配 置 成 功 
自动 绑 定 需要 的 环境 配置 完毕 后 , 运行 引擎 包 下 的 toolsytojsgenbindings.py 脚 本 ， 知 出 现 如 图 
16-8 所 示 的 界面 ( Windows 上 的 界面 如 图 16-9 所 示 )， 则 说 明 环境 已 经 配置 成 功 。 


eee ojBasabashsm S4422 c\Windows\system32\cmd.exe - = B® 
details = "'FLT_MAX' macro redefined"> 
4. <severity = Warning, | 
location = <SourceLocation file '/Users/Jeff/Documents/Cocos So et C:\\Wsers\\LingJianfeng\\Desktop\\jsb\\ndk\ 
/Workspace/android-ndk-r9d/toolchains/llvm-3.3/prebuilt/darwin-x oolchains\\11um-3.3\\prebuilt\\windows/lib/clang/3.3/include\ 
86_64/lib/clang/3.3/include/float.h', line 107, column 9>, 
details = "'DBL_MAX' macro redefined"> 《se ing 
5， <severity = Warning, TE NUL 


chains\\11un-3.3\\prebuilt\\windows/1ib/clan9/3.3/inelude\ 


location = <SourceLocation file '/Users/Jeff/Documents/Cocos 
/Workspace/android-ndk-r9d/toolchains/llvm-3.3/prebuilt/darwin-x 
86_64/lib/clang/3.3/include/float.h', line 114, column 9>, 
details = "'FLT_MIN' macro redefined"> 
6. <severity = Warning, 
location = <SourceLocation file '/Users/Jeff/Documents/Cocos 
/Workspace/android-ndk-r9d/toolchains/llvm-3.3/prebuilt/darwin-—x ly re\\LingJianfeng\\ \\jsb\\ndk\ 
86_64/1lib/clang/3.3/include/float.h', line 115, column 9>, mn ilt\\windows/1ib/ finelude\ 
details = "'DBL_MIN' macro redefined"> 


re\\LingJianfeng\\ 


Jeffs-MacBook-Pro:tojs Jeff$ | | 


图 16-8 Mac OS X 上 环境 配置 成 功 验证 图 16-9 Windows 上 环境 配置 成 功 验证 


需要 特别 说 明 的 是 ， 在 Mac OS X 操 作 系统 中 ， 且 你 的 系统 版 本 大 于 10.11， 那 么 在 生成 绑 定 
代码 的 时 候 ， 若 报 一 个 libclang.dylib 找 不 到 的 错误 (LibclangError: dlopen(libclang. 
dylib,6): image not found. )， 则 是 因为 Mac OS X 10.11 系 统 添 加 了 一 个 称 为 System Integrity 
Protection (SIP) 系 统 完整 性 保护 的 功能 ， 我 们 需要 先 关闭 它 ， 具 体 方 法 如 下 。 

(1) 开机 按 住 command+ R 键 ， 进 入 恢复 模式 。 

02) 打开 “使 用 工具 ” “终端 ”。 

(3) 输入 命令 csrutil disable 来 关闭 。 同 样 ， 打 开 命 令 为 : csrutil enapble。 

(4) 关闭 成 功 之 后 ， 重 启 进 入 系统 即 可 。 


16.3 ”深入 探究 绑 定 技术 


绑 定 环境 配置 成 功 之 后 ， 即 可 深入 了 解 绑 定 技术 了 。 绑 定 技术 的 原理 是 通过 libclang 分 析 C++ 
头 文件 ， 以 一 定 的 绑 定 规则 和 绑 定 代码 模板 ， 根 据 配置 文件 的 配置 ， 为 对 应 的 C++ 类 公有 方法 一 
一 生成 绑 定 代码 ， 从 而 将 C++ 的 API 暴 露 给 脚本 层 ， 供 脚本 调用 。 


16.3.1 函数 注册 


函数 注册 指 的 是 将 C++ 类 注册 进 JavaScript 环 境 中 。 绑 定 工具 会 自动 生成 绑 定 代码 ,其 中 包含 一 
个 .hpp 文 件 和 一 个 .cpp 文 件 ，.hpp 文 件 包 含 函 数 注册 方法 的 声明 ， 而 .cpp 文 件 则 是 对 本 数 注册 方法 的 
实现 。Cocos 引 擎 已 经 自动 绑 定 好 的 代码 位 于 cocos2d-x/cocos/scripting/js-bindings/auto 文 件 夹 下 。 
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这 里 以 Node 类 的 setopacity 孙 数 为 例 ， 看 看 它 是 被 如 何 注册 进 JavaScript 环 境 中 的 。 
首先 ， 在 AppDelegate 类 的 applicationDidFinishLaunching 了 所 数 中 可 以 看 到 如 下 代码 : 


1 bool AppDelegate::applicationDidFinishLaunching(){ 

2 VA 

3 ScriptingCore * sc = ScriptingCore::getInstance();// 脚本 引 掌 单 例 对 象 
4 sc->addRegistetrCallback(zegister_al1l1_cocos2dqx); // 注册 遂 数 

5 i 

6 } 


在 上 面 的 代码 中 , scriptingcore 为 脚本 引擎 类 , 它 是 一 个 单 例 类 , 第 4 行 代 码 将 register_ 
all_cocos2dx 方 法 注册 到 脚本 引擎 中 。register_all_cocos2dx 方 法 在 cocos2d-x/cocos/ 
scripting/js-bindings/auto/jsb_cocos2dx_auto.cpp 文 件 里 ， 可 以 在 这 个 方法 里 看 到 如 下 代码 : 


1 void register all_ cocos2dx(JSContext* cx, JS::HandleObject obj) { 
2 // 获取 JavaScript 层 的 命名 空间 

3 JS::RootedObject ns (cx); 

4 get_or_create_ js_obj (cx, obj, "cc", &ns); 

5 A er 

6 js_register_cocos2dx_Node (cx, ns); 

7 J 贡 二 

8 J} 


述 代码 第 6 行为 类 绑 定 函数 。 在 js_register_cocos2dqx_Node 国 数 中 ， 它 实现 了 类 成 员 
而 Noqe 的 setopacity 困 数 就 是 通过 下 面 的 方式 生成 了 JavaScript 的 API， 并 且 绑 定 到 了 
C++ 类 的 函数 : 


1 void js_register_cocos2dx_Node (JSContext *cx, JS::HandleObject global) { 

2 jsb_cocos2d_Node _ class = (JSClass *)calloc(1, sizeof (JSClass)); 

3 jsb_cocos2d_Node class->name = "Node"; 

4 a i 

5 static JSFunctionSpec funcs[] = { 

6 i 

7 JS_FN("setOpacity", js_cocos2dx_Node_ setOpacity, 1, JSPROP_ PERMANENT | 
JSPROP_ENUMERATE) 

8 i 

9 JS_FS_END 

10 3 

1 eh 

2 主 


上 述 为 API 绑 定 函 数 。 在 第 7 行 代码 中 ， 宏 函数 Js_FN 的 第 一 个 字符 串 参 数 "setopacity" 是 
JSB 的 API， 它 供 脚 本 层 调 用 。 我 们 可 以 改动 它 ， 但 是 一 般 不 建议 这 样 做 ， 因 为 这 样 会 破坏 了 JSB 
引擎 和 HTML5 引 擎 API 的 一 致 性 。 


第 二 个 参数 为 C++ 层 的 对 应 函数 。 例 如 ，SpiderMonkey 调 用 JavaScript 层 中 的 noqe . 
setopacity () 子 数 时 ， 在 Native 上 最 终 调 用 到 js_cocos2dx_Node_setOpacity 子 数 ， 而 该 也 
数 为 Node 类 setopacity 方 法 的 绑 定 实现 。 


三 个 参数 是 函数 调用 时 的 参数 个 数 。 


Nisy 
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最 后 一 个 参数 是 一 些 访问 特性 ，JSPROP_PERMANENT 表 示 不 可 删除 ，JSPROP_ENUMERAT 
表示 在 枚 举 时 可 见 。 


下 列 代 码 为 js_cocos2qx_Node_setopacity 国 数 的 实现 : 


加 


1 bool js_cocos2dx_Node_setOpacity (JSContext *cx, uint32 _t argc, jsval *vp)t 

2 // 1. 通过 SpiderMonkey API 获 取 脚 本 层 传 入 的 所 有 参数 

3 JS::CallArgs args = JS::CallArgsFromVp (argc, vp); 

4 bool ok = true; 

5 // 2. 通 过 SpiderMonkey API 获 取 本 次 调用 的 脚本 层 调 用 者 对 象 

6 JS::RootedObject obj (cx，args.thisv() .toobjectOrNu11() ) ， 

8 JjS. proxy t *Hroxy 三 DG 可 poxy (Obj)’; 

9 // 3. 转换 脚本 层 调 用 对 象 为 其 对 应 的 C++ 对 象 

10 cocos2d: :Node* cobj = (cocos2d::Node *) (proxy ? proxy->ptr : NULL); 

下 JSB_PRECONDITION2( cobj, cx, false, "js_cCocos2dx_ Node setOpacity : Invalid 
Native Object"); 

12 和 人 GG :二 ) 

13 uint16_t arg0; 

14 // 4. 转换 脚本 层 传 入 的 参数 对 象 为 C++ 值 或 对 象 

15 OK &= jsval to uint16 (cx, args.get (0), &arg0); 

16 JSB_PRECONDITION2 (ok, cx, false, "js_cocos2dx_ Node_setOpacity : Error 

processing arguments"); 

17 // 5. 最 终 使 用 转换 过 的 参数 调用 实际 的 C++ API 

18 Cobj->setOpacity (arg0); 

19 // 6. 设置 脚本 层 通 数 调 用 的 返回 值 

20 args.rval() .setUndefined(); 

21 return true; 

22 } 

23 

24 JS_ReportError (cx, "js_cocos2dx_Node_ setOpacity : wrong number of arguments: 
$d, was expecting %d", argc, 1); 

25 return false; 

26 } 


上 述 代 码 完 成 了 Node 类 中 setopacity 方 法 的 绑 定 , 五 可 以 在 这 文 里 做 一 个 小 结 ， 将 上 述 术 的 几 个 
步骤 归纳 一 下 。 

脚本 自动 绑 定 工具 绑 定 出 来 的 结果 是 一 个 .hpp 头 文件 和 一 个 .cpp 实 现 文件 ， 这 两 个 文件 完成 
如 下 几 个 功能 。 

(1) 完成 Cocos2d-x 引 警 所 有 的 C++ API 的 绑 定 函数 ， 用 于 桥接 脚本 环境 中 的 API 和 C++ API。 
在 脚本 层 调 用 相应 API 时 ， 实 际 调用 的 是 绑 定 函数 ， 绑 定 困 数 最 终 转 发 调用 C++ API， 如 


js_cocos2dqx_Nodqe_setopacity 国 数 。 


(2) 完成 C++ 类 的 绑 定 函数 ， 用 于 在 脚本 环境 中 创建 对 应 会 将 所 有 API 的 绑 定 印 数 注 
册 到 脚本 类 中 ， 这 样 在 脚本 中 调用 这 些 API 时 就 会 0 例如 js_register_ 
cocos2dqx_Node 国 数 。 

(3) 注册 绑 定 函数 ， 这 个 函数 会 调用 C++ 类 的 绑 定 函数 。 调 用 这 个 注册 函数 ， 这 些 C++ 
类 被 实际 注册 到 脚本 环境 中 ， 例如 : sc->addRegisterCallback (register_all_cocos2dx) 


16.3 深入 探究 绑 定 技术 267 


等 。 整 个 过 程 如 图 16-10 和 图 16-11 所 示 。 


node.setOpacity (128); 


128 (JS Number) 获取 所 有 脚本 层 参数 


node (JS cc.Node) 获取 脚本 层 调 用 者 对 象 


node (JS cc.Node) -> cobj (C++ Node) 转换 脚本 层 调 用 者 对 象 
为 其 对 应 的 C++ 对 象 
注册 函数 : 


register_all_cocos2dx 


128 (JS Number) -> arg0 (C++ uint) 2 | 人 


类 绑 定 函 数 ， 


js_register_cocos2dx_Node cobj ->setOpacity (arg0) 调用 C++API 
Eb 设置 鸡 数 调用 的 返 下 
API 绑 定 函 数 : args.val().SetUndefined() 和 脚本 层 函 数 调用 的 返 值 
js_cocos2dx_Noqe_set0pacity 则 需要 将 C++ 返回 值 转 为 脚本 层 的 值 或 对 象 ) 


图 16-10 ” 绑 定 注册 过 程 图 16-11 JSB 调 用 过 程 


另外 ，cocos2d-x/cocos/scriptingyjs-bindings/auto/api 文 件 夹 里 面 的 JavaScript 文 件 为 绑 定 时 自动 
生成 的 API， 它 仅仅 只 是 一 个 说 明文 件 ， 通常 被 用 来 生成 文档 ， 或 者 作为 其 他 IDE 中 代码 补 全 的 
基础 。 例 如 ， 可 以 提取 api 文 件 夹 里 的 JavaScript 文 件 ， 然 后 根据 Sublime 的 代码 补 全 规则 写 一 个 脚 
本 ， 从 而 生成 Sublime 编 辑 器 的 代码 补 全 。 


16.3.2 ”分析 C++ 头 文件 
Bindings Generator 自 动 绑 定 工具 通过 libclang 的 Python API 对 C++ 头 文件 进行 语法 分 析 ， 然 后 
对 C++ 类 的 API 一 一 生成 绑 定 代码 ， 甚 绑 定 的 整个 过 程 如 下 真实 代码 处 理 过 程 与 下 列 步骤 的 顺 
序 并 不 严格 一 致 ， 代 码 的 处 理 过 程 是 边 扫描 边 读 取 配 置 边 生 成 )。 
(1) 根据 tools/tojs/genbindings.py 脚 本 的 代码 识别 和 人 处 理 相关 的 系统 环境 。 
(2) 根据 tools/tojs/genbindings.py 脚 本 传人 脚本 绑 定 需要 的 参数 ， 包 括 相 关 的 配置 文件 和 对 应 
的 需要 生成 的 目标 文件 的 目录 。 16 
(3) 运行 tools/bindings-generator/generatorpy 脚 本 ， 根 据 第 (2) 步 传人 的 配置 文件 找到 相关 C++ 
代码 目录 ， 扫 描 相关 的 头 文件 。 
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(4) 根据 第 (2) 步 传人 的 配置 文件 里 的 规则 确定 生成 、 跳 过 、 重 命名 等 转换 规则 。 


(5) 根据 tools/bindings-generator/targets/spidermonkey/ 文 件 夹 里 的 模板 文件 和 conversions.yaml 
配置 文件 确定 代码 的 转换 规则 。 


(6) 生成 C++ 类 的 API 绑 定 代码 并 输出 到 目标 文件 中 。 


16.3.3” 绪 定 规则 


绑 定 规则 是 一 个 以 .ini 为 后 级 的 文本 配置 文件 ， 例 如 cocos2d-x/tools/tojs/ 下 的 cocos2dx.ini、 
cocos2dx_uiini 等 , 它 对 应 的 是 16.3.2 节 第 (2) 步 所 读 入 的 配置 。 通 常情 况 下 , 我 们 添加 的 大 部 分 新 
的 C++ API 接 口 自动 绑 定 配置 都 在 这 里 ， 其 主要 部 分 如 表 16-1 所 示 。 


表 16-1 自动 绑 定 配置 信息 说 明 


参 数 - 明 

prefix 作为 自动 绑 定 工具 生成 的 绑 定 函 数 的 函数 名 前 组 

target_namespace 脚本 中 的 目标 命名 空间 ， ad ccui、spine 等 

clang_flags clang 标 签 ， 其 中 可 以 添加 预 编译 宏 

macro_judgement 提供 了 自动 绑 定 的 预 编 译 控制 ， 我 们 可 以 通过 预 编译 选项 有 条 件 地 导出 相应 的 APL， 
例如 平台 的 控制 和 debug 的 控制 等 

headers 需要 被 绑 定 的 头 文件 列表 ， 以 空格 分 隔 ， 头 文件 将 被 扫描 ， 同 时 也 会 扫描 头 文件 中 包 
含 的 头 文件 

classes 需要 被 绑 定 的 类 名 列表 ， 以 空格 分 隔 

classes nesd xtend 需要 在 脚本 层 被 继承 的 类 列表 ， 以 空格 分 隔 

skip 需要 忽略 的 API 列 表 ， 格 式 为 className: : [apil api2]， 不 同 的 类 以 逗号 分 隔 

rename_functions 需要 被 重 命名 的 函数 ， 会 将 C++ 中 的 国 数 绑 定 为 指定 名 字 的 脚本 函数 ， 格 式 为 
ClassName: : [cppFunctionName=scriptFunctionName ...], 不 同 的 类 以 逗号 分 隔 

rename olasses 需要 被 重 命 名 的 类 ， 会 将 C++ 中 的 类 名 绑 定 为 指定 的 脚本 类 名 ， 格 式 为 


CppClassName: :ScriptCclassName， 以 逗号 分 割 
classes_have_no_parents 没有 父 类 的 类 列表 ， 以 空格 分 隔 
abstract_classes 没有 构造 函数 的 类 列表 ， 以 空格 分 隔 


16.3.4” 绪 定 模板 


有 了 这 些 配置 后 ， 绑 定 工具 是 否 就 可 以 生成 各 种 API 的 绑 定 函数 呢 ? 答案 是 否定 的 ， 正 所 谓 
一 个 巴掌 拍 不 响 。 现 在 绑 定 工具 虽然 知道 了 哪些 API 要 被 绑 定 ， 但 是 它 并 不 知道 要 以 什么 样 的 方 
式 进行 绑 定 ， 所 以 还 需要 配合 各 种 API 的 绑 定 代码 模板 才 可 生成 各 种 API 的 绑 定 函数 。 对 于 每 一 
ee 的 模板 ， 自 动 绑 定 工具 会 读 取 clang.cindex 解 析出 来 的 类 或 者 API 定 义 信 息 以 及 绑 定 配置 信 
息 ， 从 而 生成 特定 API 的 绑 定 代码 。 这 些 模 板 放 在 cocos2d-x/tools/bindings-generatortargets/ 
spidermonkey/templates 下 ， 大 概 有 以 下 几 种 : 
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口 头 文件 和 cpp 文 件 的 头 部 代码 模板 
口 头 文件 和 cpp 文 件 的 尾部 代码 模板 
口 头 文件 内 容 模板 ， 包 含 脚本 层 类 对 象 声 明 、 原 型 对 象 声 明 和 API 绑 定 函 数 声明 
口 类 绑 定 函数 模板 

口 构造 函数 的 绑 定 函数 模板 

D 静态 函数 的 绑 定 函数 模板 

口 重 载 的 静态 函数 的 绑 定 函数 模板 
D 公共 属性 的 绑 定 函数 模板 

口 公共 方法 的 绑 定 函数 模板 

口 重 载 的 公共 方法 的 绑 定 函数 模板 
D lambda 函数 的 绑 定 函数 模板 


16.3.5 “转换 函数 


自动 绑 定 工具 虽然 强大 , 但 是 它 毕 竞 仅仅 只 是 个 工具 ,在 一 些 问题 上 还 是 需要 我 们 参与 进来 
的 ， 例 如 我 们 需要 告诉 动 绑 定 工具 如 何在 各 种 C++ 类 型 和 脚本 类 型 之 间 转 换 。 

Cocos2d-x 引 擎 中 C++ 和 JavaScript 对 象 的 互相 转换 困 数 规则 在 cocos2d-x/tools/bindings- 
generator/targets/spidermonkey/conversions.yaml 文 件 中 ， 其 中 包含 的 转换 有 以 下 几 点 。 


口 本 地 数据 类 型 转换 : 在 自动 绑 定 中 ，C++ 的 short 类 型 转换 成 int32_t 类 型 ，float 类 型 
被 转换 成 aouble 类 型 ， 这 是 因为 Eloat 类 型 没有 办 法 生成 绑 定 。 代 码 见 conversions.yaml 
文件 中 的 native_types 模 块 。 

口 命名 空间 转换 : 将 C++ 中 的 命名 空间 转 为 JavaScript 的 命名 空间 ， 并 对 甚 简化。 示例 代 码 
如 下 : 


1 ns_map: 
2 "cocos2d: :extension::": "ce." 
3 "Cocos2d: :ui::": "ccui." 

4 GOGOS2ds SS MO 

5 "spine::": "sp." 

6 "Cocostudio::": "ccs." 

7 "cocosbuilder::": "cc." 
"CocosDenshion::": "cc." 


口 JavaScript 变 量 转换 为 C++ 变量 : ok &= 后 面 的 函数 ， 为 转换 函数 。 例 如 ，jsval_to_ 
ccrect 图 数 为 将 JavaScript 传 过 来 的 cc.rect 变 量 转 为 C++ 的 Rect。 人 代码 见 
conversions.yaml 文 件 中 的 to_native 模 块 。 
口 JavaScript 对 象 转 换 成 C++ 对 象 : 代码 见 conversions.yaml 文 件 中 的 to_native/object 模 块 。 16 
口 C++ 变量 转换 成 JavaScript 变 量 : 代码 见 conversions.yaml 文 件 中 的 from_native 模 块 。 
口 C++ 对 象 转 换 成 JavaScript 对 象 : 代码 见 conversions.yaml 文 件 中 的 from_native/object 模 块 。 
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16.4 绑 定 自己 的 C++ 类 


有 了 Bindings Generator 工 具 ， 绑 定 则 不 是 想象 中 那么 复杂 了 ， 我 们 只 需 写 好 要 绑 定 的 C++ 类 
和 绑 定 配置 文件 之 后 ， 再 运行 Bindings Generator 工 具 ， 即 可 完成 绑 定 。 


16.4.1 编写 要 绑 定 的 C++ 类 


首先 ， 编 写 一 个 简单 的 Person 类 ， 这 个 类 定义 了 4 个 构造 函数 、 一 个 析 构 函数 、6 个 针对 类 
属性 的 get 和 set 方 法 以 及 两 个 简单 的 类 行为 函数 ， 代 码 如 下 : 


Person.h 


三 


#ifndef Person_ hh 
#define Person mh 
#include <string> 
class Persont{ 
// [初始 化 相关 ] 
BUDLIC: 
Person(); 
Person(const std::string& name); 
(c 


\D oawm 心 wN 上 


Person(const std::string& name, int age); 
Person(const std::string& name, int age, float height); 
~Person(); 

// [属性 定义 ] 基 础 属性 

protected: 


std::string m sName; 
int m nAge; 
float m fHeight; 
// [方法 声明 ] 类 自身 行为 
public: 
void onGreetings () ; // 打招呼 
void onSpeakWithContent (const std::string& content);// 说 话 
// [方法 声明 ] 属 性 getter && setter 
public: 
const std::string& getName(); 
void setName (const std::string& name); 
int getAge(); 
void setAge(int age); 


DO NO DO DPccPPPPPPPPpPI 
NU 和 ONDOCOooo、~aUm 和 ww 忆 口 


27 float getHeight (); 

28 void setHeight (float height); 
29. 333 

30 #endif /* Person h */ 


Person.cpp 

#include "Person.h" 

#include <iostream> 

using namespace stdqd; 

/Ya 

// 打招呼 

void Person::onGreetings() { 

std::cout << "Hi, I am person"; 


OUWUW 心 wm 情 
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8 计 

9 -7 说 话 

10 void Person: :onSpeakWithContent (const std::string& content ) { 
11 std::cout << content; 

Sp 

| rh sy 


当 编 写 好 C++ 文件 之 后 ， 即 可 开始 绑 定 。 


16.4.2 ”生成 C++ 类 的 自动 绑 定 代码 


实际 上 ，Cocos 引 擎 提供 给 开发 者 生成 绑 定 代码 的 方式 有 两 种 。 其 一 ， 通 过 绑 定 环境 的 test 
测试 工程 。 其 二 ， 扩 展 引 擎 中 生成 自动 绑 定 代码 的 工具 ,这 也 是 推荐 的 做 法 。 我 们 先 一 起 来 看 看 
如 何 通 过 test 测 试 工 程 生成 绑 定 代码 。 

1. 通过 test 测 试 工程 绑 定 

test 工 程 位 于 cocos2d-x/tools/bindings-generator 路 径 下 ， 其 目录 结构 如 图 16-12 所 示 。 其 中 ， 
simple_ test 文件 夹 保存 需要 绑 定 的 C++ 类 文件 ，testsh 和 test.bat 分 别 为 Mac OS X 和 Windows 操 作 系 
统 中 生成 自动 绑 定 代码 的 脚本 工具 ，testini 文 件 保 存 绑 定 的 规则 ， 剩 下 两 个 以 sample 结 尾 的 文件 
保存 一 些 环境 配置 信息 ， 例 如 Python 安装 路 径 、NDK ROOT 、clangllvmdir 路 径 等 配置 在 
user.cfg.sample 中 ， 如 果 你 需要 用 它 来 配置 这 些 信 息 ， 则 应 当 将 .sample 后 绥 去 掉 ， 才 能 保证 test 脚 
本 能 正确 读 取 到 它 ， 而 userconf.ini 则 为 运行 test 脚 本 后 输出 的 配置 信息 。 在 Mac OS X 中 ， 可 忽略 
不 管 这 两 个 文件 ， 在 Windows 系 统 中 ， 也 可 通过 直接 修改 test.bat 文 件 的 方式 取代 user.cfg。 所 以 ， 
不 管 如 何 ， 这 两 个 文件 都 可 直接 忽略 不 管 。 
© simple_class.cpp 

加 test.bat h simple_class.h 

test.ini 

test.sh 

user.cfg.sample 

Userconf.ini.sample 


/ 


图 16-12 test 目录 结构 

了 解 完 这 些 信息 之 后 ， 就 可 以 开始 绑 定 了 ， 绑 定 的 步骤 如 下 。 

(1) 复制 测试 工程 。 在 cocos2d-x/tools/bindings-generator 路 径 下 新 建 一 个 文件 夹 并 对 其 命名 ， 
例如 笔者 将 其 命名 为 MyBinding， 然 后 复制 simple test、testbat、testini 和 testsh 到 MyBinding 文 件 
夹 中 。 

(2) 添加 C++ 文件 。 删 除 simple_ test 中 的 simple_class.h 和 simple_class.cpp 文 件 ， 并 对 simple test 
进行 重 命名 ,例如 person_binding， 然 后 将 需要 绑 定 的 类 所 在 的 C++ 文件 复制 到 person_binding 下 。 
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(3) 编写 .ini 规 则 文件 。 其 主要 步骤 有 如 下 5 个 步骤 ， 其 中 “-” 和 “+” 符 号 为 模拟 Git 中 的 代 
码 变 动 ， 表示 代码 的 删除 和 添加 。 具 体 代 码 见 随 书 代码 资源 的 Unit_16_JavaScript_Binding/ByTest/ 
MyBinding/test.ini 文 件 。 


步骤 1 说 明 “将 prefix 的 值 修 改 为 auto_person_binqing, 自动 绑 定 工具 最 后 生成 的 文件 都 会 以 此 值 命 名 或 者 
作为 前 绥 ， 例 如 auto_person_ binding.hpp、auto_person_binding.cpp 和 auto_person_ binding api.js 


< prefix = autogentestbindings 
向 prefix = auto_person binding 
步骤 2 说 明 ”填写 要 绑 定 的 类 ， 多 个 类 之 间 以 空格 隔 开 


Ss classes = SimpleNativeClass 


T 


十 Classes = Person 
步骤 3 说 明 “删除 test 测 试 工程 C++ 头 文件 路 径 
Simple test_ headers = -I% (cxxgeneratordir)s/test/simple tess 


了 extra_arguments = %(android headers)s %$(clang headers)s %(android flags)s 
$ (clang_flags)s %(simple test_ headers)s %(extra_ flags)s 


十 extra_arguments $l(android headers)s %$(clang headers)s %$(android flags)s 
$$(clang_flags)s %(extra_flags)s 


步骤 4 说 明 ”填写 要 绑 定 的 C++ 类 头 文件 路 径 


headers = 8g%(CxXxgenetratordir)s/test/simple test/simple class.h 


十 headers = g%(Cxxgeneratordir)s/MyBinding/person_binding/Person .Ph 
步骤 5 说 明 ”填写 命名 空间 ， 此 步骤 可 选 ， 不 过 建议 加 上 
二 target_namespace = jf 


(4) 修改 并 运行 生成 自动 绑 定 代码 的 脚本 。 


在 Mac OS X 和 Windows 操 作 系 统 中 , 生成 绑 定 代码 的 脚本 是 不 一 致 的 , Mac OS X 中 采用 shell 
脚本 ， 而 Windows 中 为 .bat 批 处 理 脚本 。 


口 Mac OS X 操 作 系 统 : 修改 test.sh 文 件 中 最 后 一 行 LD_LIBRARY_PATH 的 值 ， 将 $ {Cxx_ 
GENERATOR_ROOT} /test 改 为 ${CXx_GENERATOR_ROOT} /MyBinding。 然 后 打开 终端 
工具 ， 运 行 如 下 命令 ， 即 可 生成 绑 定 代码 : 


1 cd /pathTo/cocos2d-x/tools/bindings-generator/MyBinding 
2 ./test.sh 


口 Windows 操 作 系统 : 在 test.bat 文 件 中 的 第 10 行 左右 ,打开 PYTHON_ROOT 和 NDK_ROOT 的 注 
释 ， 并 为 其 设置 值 ， 示 例 代 码 如 下 : 


PYTHON_ROOT=C: /Python27 
NDK_ROOT=C:/Users/LingJianfeng/Desktop/jsb/ndk/android-ndk-r9d 


证 SE 


2 Se 


设置 好 PYTHON_ROOT 和 NDK_ROOT 的 值 之 后 ， 将 test.bat 文 件 中 %CXXx_GENERATOR_ROOT%/ 
test 改 为 sgCXX_GENERATOR_ROOT%/MyBinding， 然 后 打开 命令 行程 序 (cmd.exe )， 运 行 如 下 
命令 ， 即 可 生成 绑 定 代码 : 


1 cd /pathTo/cocos2d-x/tools/bindings-generator/MyBinding 
2 test.bat 


16.4 绑 定 自己 的 C++ 类 273 


说 明 上 述 两 个 代码 段 中 的 pathTo 为 读者 自己 电脑 上 引擎 所 存放 的 路 径 ， 后 面 的 pathTo 也 是 
如 此 , 例如 笔者 Mac OSX 的 路 径 是 : /Users/Jeff/Documents/Cocos/cocos2d-x/tools/bindings- 
generator/MyBinding。 

Windows 上 的 路 径 是 : C:\Users\LingJianfeng\Desktop\cocos2d-x\tools\bindings-generaton\ 
MyBinding。 


运行 生成 绑 定 代码 的 脚本 之 后 ， 在 当前 文件 路 径 下 生成 一 个 simple_test_bindings 文 件 夹 ， 其 
中 包含 一 个 api 文 件 夹 ， 以 及 一 个 .hpp 和 .cpp 的 文件 ， 如 图 16-13 所 示 。 


Q 搜索 

AUTHORS person_binding p api p> 

backup -EET c' auto_person_binding.cpp 

clang > 加 test.bat h auto_person_binding.hpp 
国 generator test.ini 

generator.py test.sh 

libclang bp Userconf.ini 

MyBinding pb 

README.md 

targets > 

test b> 

tools p 


图 16-13” 绑 定 代 码 生 成 的 结果 


虽然 此 时 生成 了 绑 定 代码 , 但 是 值得 注意 的 是 ，Person 类 并 没有 继承 cocos2d: :Ref 对 象 ， 
也 就 是 说 通过 Person 类 创建 的 实例 对 象 的 内 存 需要 我 们 自己 管理 , 这 和 Cocos 引 擎 的 设计 理念 显 
得 有 些 出 人 。 若 将 Person 继 承 自 cocos2dq: :Ref， 则 需 在 Person.h 中 引入 cocos2d.h 头 文件 ， 但 是 
此 时 再 运行 脚本 绑 定 工具 ， 则 会 报 找 不 到 cocos2d.h 文 件 的 错误 ， 这 是 因为 test 绑 定 测试 工程 中 并 
没有 把 Cocos2d-x 引 擎 相关 的 类 绑 定 进来 ( 见 16.2.1 节 )。 所 以 ， 只 要 我 们 需要 绑 定 的 类 和 Cocos2d-x 
引擎 有 交集 ， 就 可 将 此 绑 定 行为 归纳 为 对 引擎 的 扩展 ， 应 当 考 虑 通过 引擎 绑 定 代码 生成 的 
genbindings.py 脚 本 生成 绑 定 代码 ， 这 样 会 简单 和 方便 许多 。 

2. 通过 引擎 绑 定 代 码 生成 的 genbindings.py 脚 本 

genbindings.py 文 件 位 于 cocos2d-x/tools/tojs 文 件 夹 下 ， 它 是 生成 引擎 绑 定 代码 的 脚本 ， 我 们 
可 以 借助 它 来 生成 需要 的 绑 定 代码 。 但 是 在 这 之 前 ， 我 们 先 创建 一 个 Cocos2d-JS 游 戏 工 程 
HelloJSB。 接 着 ,我 们 来 看 下 如 何 使 用 genbindings.py 肢 本， 其 步骤 如 下 。 

(1) 制作 genbindings.py 的 副本 文件 。 在 HelloJSB/frameworks/cocos2d-x/tools/tojs 文 件 夹 下 新 建 
一 个 Python 脚本 并 对 其 命名 ， 例 如 我 将 它 命 名 为 jeff_genbindings.py， 然 后 将 genbindings.py 中 所 有 
的 代码 复制 到 jeff _ genbindings.py 里 面 ， 再 将 cmq_args 的 值 改 为 如 下 代码 ; 

1 cmd args = {'person.ini':('custom-model','jsb jeff external auto'),} 
其 中 ，person.ini 表 示 等 下 需要 编写 的 配置 文件 ，custom-model 为 模块 名 称 ， 它 对 应 到 person.ini 文 
件 中 的 第 一 行 代 码 ， 而 jsb_jeff_external_ auto 则 为 最 终生 成 绑 定 代码 的 文件 名 称 ， 生 成 的 绑 定 代码 
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文件 将 默认 被 存放 在 cocos2d-x/cocos/scripting/js-bindings/auto 文 件 夹 下 。 当 然 , 你 也 可 以 修改 生成 
代码 的 存放 路 径 ， 例 如 我 将 它 放 在 HelloJSB/frameworks/runtime-src/Classes/jeff/auto 文 件 下 ， 那 么 
只 需 修 改 jeff_genbindings.py 文 件 中 output_dir 变 量 的 值 即 可 ， 代 码 如 下 : 

1 output_ dir = '%$s/../runtime-src/Classes/jeff/auto' % project_root 

(2) 添 加 C+ 文件 。 把 之 前 写 好 的 Person.h 和 Person.cpp 文 件 复 制 到 HelloJSB/frameworks/ 
runtime-src/Classes/jeff 下 。 另 外 ， 值 得 说 明 的 是 ， 我 并 不 推荐 你 将 自己 编写 的 C++ 类 以 及 自动 绑 
定 生成 的 代码 集成 到 cocos2d-x 引 擎 当中 ， 应 当 将 这 些 放 在 项 目的 ffameworks/runtime-src/Classes 
目录 下 ， 这 是 一 种 正确 的 做 法 ， 也 是 官方 推荐 的 做 法 。 

此 时 ， 可 将 我 们 之 前 编写 好 的 Person 类 做 一 个 修改 ， 让 它 继 承 自 cocos2d: :Ref ， 从 而 支 
持 Cocos2d-x 引 擎 的 内 存 自动 管理 机 制 , 并 将 Log 的 输出 方式 也 改 为 ccLoG 宏 。 修 改 后 的 代码 如 下 : 


修改 后 的 Person.h 


人 
2 #include "cocos2d.h" 
3 class Person : public cocos2d::Reff{ 
4 // [初始 化 相关 ] 
5 public: 
6 Person(); 
2 Person(const std::string& name); 
人 
修改 后 的 Person.cpp 
1 
2 // 打招呼 
3 void Person::onGreetings() { 
4 CCLOG ("Hi, I am person"); 
号 “于 
6 // 说 话 
7 void Person::onSpeakWithContent (const std::string& content)t 
8 CCLOG("%s", content.c_str()); 
9 
下 
(3) 编写 .ini 配 置 文件 。 


在 <(1) 制作 genbindings.py 的 副本 文件 > 中 ， 我 们 指定 了 配置 文件 的 名 称 为 person.ini， 所 以 这 
里 我 们 可 以 通过 复制 出 一 个 cocos2dx.ini 副 本 文件 ， 然 后 将 其 命名 为 person.ini， 然后 再 对 person.ini 
编辑 即 可 ， 编 辑 的 步骤 有 如 下 几 个 步骤 。 

步骤 1 说 明 更 改 模 块 名 称 ， 此 参数 对 应 jeff_genbindings.py 中 的 cmq_args 字 典 


[cocos2d-x] 


十 [custom-model] 
更 改 前 级 信息 ， 但 是 此 值 在 jeff_genbindings.py 中 的 cm9_args 参 数 强 制 修改 了 ， 所 以 此 值 此 处 
无 效 了 ， 可 忽略 


= prefix = cocos2dx 


十 prefix = user_external 
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( 续 ) 
添加 命名 空间 ， 此 ini 文 件 中 绑 定 的 所 有 类 都 将 采用 这 个 命名 空间 。 在 JavaScript 中 ， 将 被 创建 


说 日 i es 
说 明 六 类 似 'ns - ns - 11 0 ,格式 的 代码 
target_namespace = cc 

党 target_namespace = jf 


步骤 4 ”说明 ”指定 需要 解析 的 头 文件 ， 它 会 递归 解析 

3 headers = g%(cocosdir)s/cocos/cocos2d.h ...... 

十 headers = $(cocosdir)s/../runtime-src/Classes/jeff/Person.h 
步骤 5 说 明 填写 要 绑 定 的 类 ， 用 空格 隔 开 ， 支 持 正 则 表达 式 


classes = New.* Sprite SpriteBatchNode ...... 


而 classes = Person 
步骤 6 说 明 指定 需要 继承 的 类 


classes_needqd extend = Node _ NodeRGBA Layer.* ...... 


十 classes_need extend = Person 
步骤 7 说 明 将 skip、rename_functions 、rename_classes 等 值 置 空 
来 skis = 


rename_functions = 
rename_classes = 
classes_have no _ parents = 


abstract_classes= 


(4) 复制 Bindings Generator 工 具 。 将 cocos2d-x/tools/bindings-generator 文 件 夹 复制 到 HelloJSB/ 
frameworks/cocos2d-x/tools 目 录 下 。 


(5) 运行 生成 自动 绑 定 代码 的 脚本 。 

当 完 成 如 上 步骤 之 后 ， 一 切 处 于 就 绪 状 态 ， 只 需 运 行 生成 自动 绑 定 代码 的 脚本 即 可 ， 操 作 
如 下 。 

在 Mac OS X 操 作 系 统 中 ， 打 开 终 端 ， 运 行 如 下 命令 : 


1 cd /Users/Jeff/Desktop/HelloJSB/frameworks/cocos2d-x/tools/tojs 
2 python ./jeff_genbindings.py 


在 Windows 操 作 系统 下 ， 通 过 命令 行程 序 运 行 如 下 命令 : 


1 cd C:\Users\LingJianfeng\Desktop\HelloJSB\frameworks\cocos2d-x\tools\tojs 
2 python jeff_genbindings.py 


运行 脚本 之 后 ， 会 在 HelloJSB/frameworks/runtime-src/Classes/jeff/auto 目 录 下 生成 一 个 C++ 
的 .hpp 和 .cpp 文 件 ， 以 及 在 auto/api 下 生成 一 个 以 .js 为 后 缀 的 api 文 档 文件 ， 如 图 16-14 所 示 。 


cn AppDelegate.cpp auto 四 国 api  " jsb_jeff_external_auto_api.js 
hi AppDelegate.h cn Person.cpp cn jsb_jeff_external_auto.cpp 
jeff pb h Person.h h jsb_jeff_external_auto.hpp 


图 16-14 ”genbindings.py 生 成 的 绑 定 代码 
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3. 将 绑 定 生成 的 代码 集成 到 项 目 工 程 中 
接 下 来 ， 我 们 需要 针对 不 同 的 平台 进行 集成 操作 ， 可 分 为 如 下 两 个 分 支 。 
(1) iOS 和 Mac OS X 的 集成 


在 Mac OS X, 你 的 电脑 上 必须 装 有 Xcode 开发 软件 , 然后 通过 下 面 几 个 步骤, 便 可 集成 成 功 。 


1) 添加 绑 定 的 类 到 项 目 工程 。 在 安装 好 Xcode 的 情况 下 ， 双 击 打 开 HelloJSB/frameworks/ 
runtime-src/proj.ios_mac/HelloJSB.xcodeproj 工 程 文件 ， 然 后 将 jeff 文 件 夹 拖 忠 到 项 目 工 程 中 ， 勾 选 
Create groups、HelloJSB-mobile 、HelloJSB-desktop 按 钮 ， 如 图 16-15 所 示 。 添 加 Person 文 件 到 工程 


后 ，Xcode 的 目录 结构 如 图 16-16 所 示 。 


六 国 HelloJSB 
Pp 加 cocos2d_js_bindings.xcodeproj 
> 图 cocos2d_libs.xcodeproj 


Choose options for adding these files: 


Destination: Copy items if needed 


Added folders: © create groups 


Create folder references 


Add to targets: 图 A: HelloJSB-mobile 
A HelloJSB-desktop 


Pb script 
Vv Classes 
v jeff 
了 人 Iauto 
pr api 


cn jsb_jeff_external_auto.cpp 
h jsb_jeff_external_auto.hpp 
Person.cpp 


ed 
hl Person.h 


er AppDelegate.cpp 


Cancel h AppDelegate.h 


Pb Frameworks 


图 16-16 添加 Person 文 件 到 工程 后 ，Xcode 的 


图 16-15 


将 jeff 文 件 夹 添加 到 HelloJSB 工 程 中 


目录 结构 


2) 注册 绑 定 。 当 头 文件 添加 完毕 后 ， 便 可 进行 函数 注册 。 打 开 AppDelegate.cpp 文 件 ， 引 入 
jsb_jeff external auto.cpp 文 件 ， 并 在 AppDelegate: :applicationDidFinishLaunching 方 法 


中 对 绑 定 函数 进行 注册 ， 代 码 如 下 : 


APPDelegate .cpP 
1 #include "AppDelegate.h" 
2 #include "jeff/auto/jsb_jeff_external_auto.hpp"// 引入 绑 定 代码 文件 
OA 
4 bool AppDelegate: :applicationDidqFinishLaunching(){ 
5 J 
6 ScriptingCore* sc = ScriptingCore: :getIinstance(); 
7 sc->addRegisterCallback (register_all cocos2dx); 
8 sc->addRegisterCallback (register_cocos2dx_js_core); 
9 sc->addRegisterCallback (jsb_register_ system); 
10 // 自 定义 绑 定 子 数 注册 
水 入 sc->adqdqRegisterCallback(zregister_al1_usetr_external) : 
12 Ve et 
13. 小 
3) 测试 绑 定 结果 。 此 时 ， 便 完成 了 C++ 的 Person 类 到 JavsScript 的 绑 定 了 。 我 在 main.js 中 的 


cc.game.onStart 捕 数 中 键入 如 下 代码 来 测试 : 
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1 var man = new jf.Person(" 凌 建 风 "，23，168); 
2 man.onGreetings(); // 打招呼 

3 cc.1log ("我 的 名 字 是 : "，man.getName()); 

4 cc.10og ("我 的 年 龄 是 : "，man.getAge()); 

5 cc.1log ("我 的 身高 是 : "，man.getHeight ()); 


运行 之 后 ， 在 控制 台 看 到 的 输出 结果 如 图 16-17 所 示 。 到 此 ，iOS 和 Mac OS XX 平台 下 的 绑 定 
成 功 。 


JS: Cocos2d-]S v3.9 

Hi, I am person 

JS: 我 的 名 字 是 : 凌 建 风 
JS: 我 的 年 龄 是 : 23 
JS: 我 的 身高 是 : 168 


All Output 人 促 口中 


图 16-17 iOS 和 Mac OS X 集 成 测试 的 结果 


(2) Android 的 集成 

Android 的 集成 ， 需 要 在 你 的 电脑 上 安装 Eclipse 或 者 Android Studio。 这 里 我 以 Eclipse 为 例 ， 
演示 一 下 如 何 将 绑 定 的 代码 集成 到 Android 中 。 

1) Android.mk 文 件 修改 。 打 开 HelloJSB/frameworks/runtime-src/proj.android/jni 文 件 夹 下 的 
Android.mk 文 件 , 添加 相关 cpp 文 件 以 及 cpp 文 件 所 在 的 路 径 , 这 一 步 只 需 修改 LOCAL_SRC_FILES 
和 LOCAL_C_INCLUDES 的 值 即 可 ， 代 码 如 下 : 


:HM 

2 LOCAL_SRC_FILES := hellojavascript/main.cpp \ 

2 ../../Classes/jeff/Person.cpp \ 

4 ../../Classes/jeff/auto/jsb_jeff_external au to.cpp \ 
5 ../../Classes/AppDelegate.cpp 

6 

7 LOCAL C_INCLUDES := $ (LOCAL_PATH)/../../Classes \ 

8 $ (LOCAL_PATH)/../../Classes/jeff \ 

9 $ (LOCAL_PATH)/../../Classes/jeff/auto 

Or NY 汪 区 5 


2) 编译 Android 项 目 。 把 HelloJSB 导 入 到 Eclipse 中 之 前 ， 要 先 编译 下 HelloJSB 工 程 。 例 如 , 在 
Mac OS X 下 ， 打 开 终 端 ， 运 行 如 下 指令 即 可 ， 这 在 Windows 下 也 是 一 样 的 : 


1 cd /Users/Jeff/Desktop/HelloJSB 
2 cocos compile -p android 


编译 成 功 之 后 ， 终 端 显示 的 结果 如 图 16-18 所 示 。 


全 全 @ tojs 一 -bash 一 64x6 
debug : 


BUILD SUCCESSFUL 

Total time: 12 seconds 

正在 移动 apk 文件 /Users/Jeff/Desktop/Hell0JSB/simulator/android 
编译 成 功 。 


图 16-18 ”Android 工 程 编译 成 功 
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3) a 此 时 可 将 HelloJSB 导 入 到 Eclipse 当中 【〈 见 2.5$ 节 )， 运 行 项 目 ，Eclipse 控 制 
台 的 输出 结果 如 图 16-19 所 示 。 


Tag Text 
Hell... cocos2d android build version:19 
Hell... cocos2d-x de.. JS: Cocos2d-JS v3.9 
Hell... cocos2d-x de.. create rendererRecreatedListener for GLProgramState 
Hell... cocos2d-x de.. Hi, I am person 
Hell.. cocos2d-x de... ]S: 我 的 名 字 是 : 凌 建 风 
Hell... cocos2d-x de.. ]S: 我 的 年 龄 是 : 23 
Hell.. cocos2d-x de.. ]S: 我 的 身高 是 : 168 


图 16-19 ”Android 和 集成 测试 结果 


16.5 “实例 一 一 绑 定 SQLite3 


在 第 8 章 中 ， 我 曾 提 到 过 Cocos2d-JS 本 身 没 有 将 SQLite 绑 定 到 JavaScript 上 ， 需 要 通过 代码 绑 
定 的 方式 自行 实现 。 那 么 ， 在 本 章 实例 中 ， 我 们 就 来 绑 定 下 SQLite3 数 据 库 。 


16.5.1 下 载 SQLite3 源 代码 


首先 ， 你 需要 去 www.sqlite.org/download.html 下 载 SQLite3 源 码 ， 即 sqlite3.h 和 sqlite3.c 两 个 文 
件 ， 然 后 还 需要 一 个 包装 类 ， 这 个 包装 类 基于 wrapper ( 下 载 地 址 为 www.adp-gmbh.cn/sqlite/ 
wrapper.html ) 做 了 一 些 修改 ， 主 要 是 加 入 了 平台 初始 化 信息 以 及 Android 目 录 权 限 问题 ， 具 体 可 
见 随 书 代码 资源 中 的 HelloSqlite/frameworks/runtime-src/Classes/sqlite/ SQLiteWrapper.cpp 文 件 。 


16.5.2 ”创建 HelloSqlite 工程 


下 载 所 需 的 相关 文件 之 后 ， 便 可 以 创建 一 个 Cocos2d-JS 工 程 ， 我 将 其 命名 为 HelloSqlite ， 然 
后 将 SQLite3 相 关 的 文件 放 在 HelloSqlite/frameworks/runtime-src/Classes/sqlite 文 件 夹 下 ， 如 图 16-20 
所 示 。 


c+ AppDelegate.cpp c sqlite3.c 

h AppDelegate.h h sqlite3.h 
cn SQLiteWrapper.cpp 
h SQLiteWrapper.h 


图 16-20 ”SQLite3 相 关 的 源 文 件 


16.5.3 生成 绑 定 代码 


接 下 来 ,需要 通过 genbindings.py 脚 本 生成 SQLite3 的 绑 定 代码 ， 此 步骤 可 参考 16.4.2 节 ,最 终 
生成 的 绑 定 代码 依旧 选择 放 在 HelloSqlite/frameworks/runtime-src/Classes/sqlite/auto 文 件 夹 下 。 
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16.5.4 注册 绑 定 


打开 AppDelegate.cpp 文 件 ， 引 入 jsb_sqlite_external auto.hpp 文 件 ， 并 在 AppDelegate:: 
appblicationDidFinishLaunching 方 法 中 对 绑 定 函数 进行 注册 ， 代 码 如 下 : 


APPDelegate .cpP 


#include "AppDelegate.h" 

// 引入 自动 绑 定 代码 文件 

#include "Saqlite/auto/Jjsb_sdqlite_external_auto.hpp" 
Ns Ma sad 

bool AppDelegate: :applicationDidqFinishLaunching(){ 


六 

ScriptingCore* sc = ScriptingCore: :getInSstance() 
sc->addRegisterCallback (register_all cocos2dx); 
sc->addRegisterCallback (register_cocos2dx_ js_core); 
sc->addRegisterCallback (jsb_register_system); 

// 绑 定 函 数 注册 
sc->addRegisterCallback (register all sqlite external); 
J EE 


PPAPPLOEOJAUUARAODNDP 
心 ON 有 履 品 


16.5.5 ”集成 到 平台 


在 iOS 和 Mac OSX 上 ,你 只 需 打 开 HelloSqlite/frameworks/runtime-src/proj.ios_mac/HelloSqlite. 
xcodeproj 工 程 文 件 , 然后 在 Xcode 中 将 HelloSqlite/frameworks/runtime-src/Classes/sqlite 文 件 夹 拖 蝶 
到 HelloSqlite 项 目 中 即 可 ， 如 图 16-21 所 示 。 

y 图 Hellosqlite 


Pp [A cocos2d_js_bindings.xcodeproj 
Pp 外 cocos2d_libs.xcodeproj 


> MD script 
了 Classes 
v sqlite 
vB auto 
Pp api 


cn jsb_sqlite_external_auto.cpp 
h jsb_sqlite_external_auto.hpp 
cl sqlite3.c 
hl sqlite3.h 
c+ SQLiteWrapper.cpp 
hl SQLiteWrapper.h 
c+ AppDelegate.cpp 
h AppDelegate.h 
Pp Frameworks 


图 16-21 ”添加 sqlite 文 件 到 工程 后 Xcode 的 目录 结构 


Android 的 集成 需要 修改 HelloSqlite/frameworks/runtime-src/proj.android/jni/Android.mk 文 件 ， 
实际 上 只 是 添加 相关 需要 编译 的 文件 以 及 文件 所 在 的 路 径 ， 代 码 如 下 : 
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二 

2 LOCAL_SRC_FILES := hellojavascript/main.cpp \ 

-3 ../../Classes/sqlite/sqlite3.c \ 

4 ../../Classes/sqlite/SQLiteWrapper.cpp \ 

5 ../../Classes/sqlite/auto/jsb_sqlite external auto.cpp \ 
6 ../../Classes/AppDelegate.cpp 

7 LOCAL C_INCLUDES := $ (LOCAL_ PATH)/../../Classes \ 

8 $ (LOCAL_PATH)/../../Classes/sqlite \ 

9 $ (LOCAL_PATH)/../../Classes/sqlite/auto 

Or AAs 


16.5.6 ”测试 结果 


在 前 面 的 步 又 中 ， 我 们 已 经 完成 了 SQLite3 数 据 库 的 绑 定 。 接 下 来 ， 需 要 编写 一 些 代 码 , 来 
测试 下 之 前 绑 定 的 数据 库 能 和 否 正常 工作 。 

首先 ， 需 要 自己 编辑 一 个 数据 库 .db 文 件 ， 或 者 你 也 可 以 将 随 书 代码 资源 中 编辑 好 的 data.db 
文件 直接 复制 过 来 ， 它 位 于 随 书 代码 资源 中 的 HelloSqlite/res 文 件 夹 下 。 然 后 通过 如 下 代码 从 
data.db 数 据 库 文件 查询 出 表 的 内 容 : 


1 loadSalite : function(sender)t{ 

2 if (!cc.sys.isNative) { return; } 

避 this.database = new sgl.SQLiteWrapper(); 

4 this.databasePath = this.database.initializing("data.db","res",""); 
5 // 打开 [数据 库 ] 

6 if (this.database.open(this.databasePath))t{ 

7 
8 
9 


cc.1og(" 数 据 库 打开 [成 功 ]1 "); 
var st = this.database.statement ("select * from userIinfo"); 
Var userDataArray = []; 
生 O whilel(st.nextRow() ){ 
下 var userData = new UserDatal(); 
12 userData.uid = parseInt (st.valueString(0)); 
于 污 userData.name = st.valueString(1); 
14 userData.level = st.valueString(2); 
生生 userData.desc = st.valueString(3); 
16 userData.gold = parseInt (st.valueString(4)); 
17 userData.diamond = parseInt (st.valueString(5)); 
18 userDataArray .push (userData); 
19 } 
20 // 数据 遍历 
21 for(var data in userDataArray){ 
22 cc.log("userData:" + userDataArray [datal] .toString()); 
23 } 
24 }elsel 
25 cc.10g ("数据 麻 打 开 [ 失 败 ]1 "); 
26 } 
2 


其 中 ,第 11 行 代码 所 创建 的 对 象 实际 上 就 是 一 个 单纯 的 数据 对 象 类 ， 其 代码 如 下 : 


1 var UserData = cc.Class.extendl({ 
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2 uid Qa 
3 name WW 
4 level O05 
5 desc es 
6 gold : 0, 
6 diamond :0, 
8 toString:function()t{ 
9 return this.name + "[" + this.uid + "] 等 级 : " + this.level + " 描述 : " + 
this.desc + " 人 金币: " + this.gold + " 钻石 : " + this.diamond; 
10 } 
和 
运行 代码 ， 在 Xcode 和 Eclipse 中 控制 台 的 输出 日 志 如 图 16-22 和 图 16-23 所 示 。 
园 HelloSqlite-mobile 
JS: Cocos2d-JS v3.9 
数据 库 打 开 状 态 1 
JS: 数据 库 打开 [成 功 ] ! 
stmt_ is OK 
JS: userData: 凌 建 风 [100001] 等 级 : 16 描述 : 我 靠 的 是 脸蛋 金币 : 33333 钻石 : 999 
JS: userData: 唐 三 藏 [100002] 等 级 : 16 描述 : 我 靠 的 是 信仰 金币 : 10008 钻石 : 60 
JS: userData: 孙 悟空 [160003] 等 级 : 99 描述 : 我 靠 的 是 人 脉 金币 : 16066 钻石 : 9999 
JS: userData: 猪 八 戒 [160004] 等 级 : 88 描述 : 我 靠 的 是 团队 金币 : 26066 钻石 : 1888 
JS: userData: 沙 和 尚 [160065] 等 级 : 77 描述 : 我 靠 的 是 听话 金币 : 11111 钻石 : 1845 
All Output 人 向 | 思 口 
图 16-22 ”SQLite 测 试 Xcode 控 制 台 的 输出 结果 
Le Tag Text 
D cocos2d.. JS: Cocos2d-JS v3.9 
D cocos2d.. create rendererRecreatedListener for GLProgramState 
D cocos2d..。 数据 库 打开 状态 1 
D cocos2d.. full path is /data/data/org.cocos2dx.HelloSqlite/files/data.db 
D cocos2d..，JS: 数据 库 打 开 [ 成 功 ] ! 
D cocos2d.. stmt_ is OK 
D cocos2d..，JS: userData: 凌 建 风 [100001] 等 级 : 10 描述 : 我 靠 的 是 脸蛋 金币 : 33333 钻石 : 999 
D cocos2d.. JS: userData: 唐 三 藏 [100002] 等 级 : 10 描述 : 我 靠 的 是 信仰 金币 : 10000 钻石 : 60 
D cocos2d.. JS: userData: 孙 悟空 [100003] 等 级 : 99 描述 : 我 靠 的 是 人 脉 金币 : 10000 钻石 : 9999 
D cocos2d. JS: userData: 猪 八 戒 [100004] 等 级 : 88 描述 : 我 靠 的 是 团队 金币 : 20000 钻石 : 1888 
D cocos2d. JS: userData: 沙 和 尚 [100005] 等 级 : 77 描述 : 我 靠 的 是 听话 金币 : 11111 钻石 : 1845 
D cocos2d.. create rendererRecreatedListener for GLProgramState 
图 16-23 ”SQLite 测 试 Eclipse 控 制 台 的 输出 结果 
16.6 ”小结 


通过 本 章 的 学 习 ， 我 们 知道 了 Cocos2d-JS 可 分 为 4 层 ， 最 底层 为 C++ 编写 的 Cocos2d-x 游 戏 引 
擎 ， 往 上 一 层 是 JavaScript 脚 本 引擎 。Cocos2d-JS 采 用 的 脚本 引 警 是 Mozilla 的 SpiderMonkey 引 擎 ， 
SpiderMonkey 是 世界 上 第 一 个 JavaScript 引 擎 ， 也 是 目前 JavaScript 执 行 性 能 最 优秀 的 引擎 之 一 。 
再 往 上 一 层 ,， 是 脚本 绑 定 层 ， 俗称 胶水 层 ,胶水 层 代 码 使 得 C++ 和 JavaScript 两 种 语言 可 以 相互 调 
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用 。 最 后 ， 最 上 面 的 那 层 ， 便 是 脚本 游戏 层 ， 这 一 层 都 是 游戏 的 业务 逻辑 处 理 代码 。 另 外 , 我们 
还 学 习 了 自动 绑 定 技术 ， 深 入 探究 绑 定 技术 背后 的 原理 ， 并 在 最 后 的 章节 实例 中 完成 了 SQLite3 
数据 库 的 绑 定 。 


16.7 参考 资源 


本 章 的 参考 资源 如 下 。 


口 Travis CI: https://travis-ci.org/。 

口 SpiderMonkey 引 擎 : https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey。 

口 Bindings Generator 工 具 : https://github.com/cocos2d/bindings-generator/。 

口 Android.mk 文 件 语法 规范 : http://blog.csdn.net/smfwuxiao/article/details/8530742。 

口 cvp panda 的 博客 : http://cvp.cocos.com/blog/265。 

口 cvp panda 的 博客 : http://cvp.cocos.com/blog/266。 

口 Cocos2d-JS 3.0 RC3 中 通过 JSB 使 用 SQLite3: http://www.cocoachina.com/bbs/read.php?tid= 
226949&page=1&toread=1#tpc。 
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正 所谓 “ 台 上 一 分 钟 ， 台 下 十 年 功 ”， 我 们 经 过 了 前 面 的 学 习 , 已 经 系统 完整 地 掌握 了 
Cocos2d-JS 游 戏 引 警 ， 此 时 此 刻 ， 你 可 以 抱 着 “是 又 子 是 马 牵 出 来 遇 遇 ”的 心态 来 学 习 本 书 的 最 
后 一 章 。 但 是 , 我 相信 当 你 阅读 到 本 章 时 , 你 已 然 是 一 匹 可 以 在 草原 中 策 马 奔腾 的 骏马 了 。 那么 ， 
来 吧 ， 怀 着 “I Can I Up” 的 心态 和 我 一 起 完成 《保卫 萝卜 2》 项 目的 开发 。 


本 章 内 容 : 


口 关卡 选择 场景 开发 
口 游戏 管理 对 象 bameManager 的 开发 
口 游戏 玩法 场景 开发 


17.1 关卡 选择 场景 开发 


在 10.12 节 中 ， 我 们 初步 开发 了 关卡 选择 场景 ， 完 成 了 滚动 背景 的 开发 。 那 么 在 本 节 中 , 我 
们 将 一 起 完成 关卡 选择 场景 的 开发 ， 完成 之 后 的 效果 如 图 17- 1 所 示 。 


图 17-1 关卡 选择 场景 
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对 图 17-1 进 行 分 析 可 以 得 出 ， 关 卡 选 择 场景 有 一 个 背景 滚动 视图 (ScrollView )， 所 有 的 节点 
都 添加 在 此 视图 中 ， 例 如 第 10 音 添加 进去 的 14 张 背景 图 片 ， 还 有 本 节 中 将 要 开发 的 关卡 连 线 、 关 
卡 选 择 按钮 以 及 关卡 按钮 类 似 涟 满 的 特效 等 

在 图 17-1 中 可 以 看 到 ， 深 动 视图 中 的 背景 图 片上 ， 美 术 已 经 标记 好 了 每 个 关卡 按钮 的 位 置 ， 
即 数字 1、2、3 等 。 但 是 ， 这 仅仅 只 是 在 背景 图 片 中 标记 出 来 ， 程 序 并 不 能 直接 获取 出 位 置 ， 屠 
么 我 们 应 当 如 何 获 取 这 些 位 置 呢 ? 我 想 , 你 应 该 想到 瓦 片 地 图 中 的 对 象 层 ,通过 瓦 片 地 图 编辑 器 ， 
我 们 可 以 很 方便 快速 地 把 这 些 位 置 标记 出 来 。 下 面 就 来 看 下 如 何在 瓦 片 地 图 中 标记 这 些 位 置 。 


17.1.1 使 用 瓦 片 地 图 编辑 器 标记 关卡 按钮 坐标 


首先 ， 在 Tiled Map Editor 编 辑 右 中 新 建 一 个 瓦 片 地 图 ， 并 对 其 命名 ， 例 如 TiledMap.tmx， 
然后 把 这 个 文件 保存 在 res/ChooseLevel/Map 文 件 夹 下 。 设 定 地 图 大 小 为 206 x 10 块 ， 瓦 片 大 小 为 
64 x 64， 这 是 因为 每 一 张 背景 图 片 的 大 小 是 943 x 640， 总 的 有 14 张 ， 所 有 背景 加 起 来 的 大 小 是 
宽 为 943 x 14=13202， 高 为 640, 每 个 图 块 的 大 小 设 为 64 x 64， 那么 ， 整 张 瓦 片 地 图 的 大 小 大 约 
是 宽 为 13202 / 64 = 206.28125， 高 为 640 / 64 = 10 。 又 因为 地 图 大 小 的 取 值 为 整数 ， 所 以 对 
206.28125 进 行 向 下 取 整 ， 得 到 206。 你 可 能 会 问 ， 向 下 取 整 后 有 其 他 影响 吗 ? 毫 无 疑问 ， 没 有 
什么 影响 。 你 也 可 以 选择 向 上 取 整 ， 只 要 保证 14 张 背景 图 都 能 在 地 图 编辑 器 中 完全 显示 出 来 即 
可 。 因 为 我 们 只 是 需要 借用 这 些 背 景 图 片 来 作为 参考 ， 从 而 标记 出 关卡 选择 按钮 的 坐标 位 置 。 

接 下 来 ,在 Tiled Map Editor 编 辑 器 中 的 操作 步骤 如 下 。 

(1) 将 14 张 背景 图 片 一 一 添加 到 地 图 编辑 器 的 “图 块 ”面板 中 。 

(2) 对 图 层 中 的 默认 网 层 进 行 重 命名 ， 例 如 bg。 

(3) 选中 “图 章 刷 ” 工 具 。 

(4) 选中 “图 块 ”面板 中 所 有 的 图 块 。 

(5) 在 地 图 编辑 区 “ 印 出 ”背景 图 片 。 

(6) 重复 第 (4) 步 和 第 (3) 步 ， 完 成 剩 下 13 张 背景 图 的 编辑 。 

(7) 新 建 一 个 对 象 层 ， 并 对 其 命名 ， 例 如 point。 


(8) 选中 point 对 象 层 ， 然 后 在 菜单 栏 中 选择 “插入 矩形 ”工具 ， 然 后 在 地 图 编辑 区 中 根据 
背景 图 片 中 的 位 置 标记 ， 在 对 应 的 位 置 插 和 人 和 矩形， 重复 此 步 又， 直到 完成 135 个 标记 。 


完成 之 后 ， 效 果 图 如 图 17-2 所 示 。 


说 明 在 “图 块 ” 面 板 中 ， 选 中 第 一 块 图 块 之 后 ， 按 住 Shift 键 ， 再 点 击 最 后 一 块 图 块 ， 便 选择 
了 所 有 的 图 块 。 
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四 与 @ T TiledMap.tmx 


这 ino9 .a 国 


六 30% 


中 < 


91, 10 当前 层 : point 56% 
图 17-2 标记 关卡 按钮 的 位 置 
如 此 ， 便 完成 了 135 关 关卡 选择 按钮 的 位 置 标记 ， 然 后 只 要 在 程序 中 获取 point 对 象 层 中 的 
对 象 ， 再 遍历 处 理 即 可 。 


现在 ， 回 到 代码 中 。 我 给 cLBackgroundLayer 对 象 (位 于 src/Scene/ChooseLevel/Layer/ 
Background.js ) 声明 了 两 个 属性 zorderMap 和 routeButtonArray ， 然 后 编写 了 一 个 
loadProperty () 函数 ， 用 来 配置 这 些 属性 的 值 ， 相 关 代 码 如 下 : 


1 var CLBackgroundLayer = cc.Layer.extendl(t{ 

2 scorllView : null, // 滚动 视图 

3 zOrderMap : {}, // 层级 枚 举 

4 routeButtonArray 2 // 关卡 按钮 数组 

本 onEnter : function () { 

6 this._super(); 

7 // 加 载 [属性 ] 

8 this.loadProperty (); 

9 AR 

10 le 

11 // 加 载 [属性 ] 

12 loadProperty : function(){ 

13 this.zOrderMap.route = 1; // [层级 ] 道 路 
14 this.zOrderMap.routeButtonEffect = 5; // [层级 ] 按 钮 特效 
计生 this.zOrderMap.levelButton = 10; // [层级 ] 按 钮 
16 

3 this.routeButtonArray = []; // 清空 按钮 数组 
18 } 

所 


其 中 ,zorderMap 对 象 用 来 模拟 枚 举 , 其 中 保存 着 各 类 节点 的 层级 , 这 样 使 得 各 类 节点 的 层级 便 
于 管理 。routeButtonArray 是 一 个 数组 ， 用 来 保存 后 面 将 要 创建 的 关卡 按钮 。 


接 下 来 ， 可 以 读 取 瓦 片 地 图 中 的 配置 信息 ， 然 后 创建 出 关卡 选择 按钮 ， 代 码 如 下 : 
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// 加 载 [ 瓦 片 地 图 ] 
loadTiledMap : function(){ 
Var node = new cc.TMXTiledMap ("res/ChooseLevel1/Map/TiledMap .tmx" ) ; 
var objectGroup = node.getObjectGroup ("point"); 
var objs = objectGroup.getObjects(); 
for (var i = 0; i < objs.length; i++) { 
var button = new ccui.Button(); 
this.scorllView.addChild(button, this.zOrderMap.levelButton, i); 
this.routeButtonArray.push (button); 
// 图 片 纹理 
var texture = "res/ChooseLevel/stagepoint adv.png"; 
// 编辑 器 中 配置 的 属性 
if (objs[il].isBoos == "YES") { 
texture = "res/ChooseLevel/stagepoint boss.png"; 
}else if (objs[i].isTime == "YES") { 
texture = "res/ChooseLevel/stagepoint time.png"; 
}else if (objs[i].isChange == "YES"){ 
texture = "res/ChooseLevel/stagepoint chance.png"; 
}else{ 
texture = "res/ChooseLevel/stagepoint adv.png"; 
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} 

button.loadTextures (texture, texture, "™"); 
button.setPosition(objs[i] .x, objs[i].y); 

button.setTag (i); 
button.addTouchEventListener(this.onLevelButtonEvent, this); 


MD DDN NA 
OU 人 wb 必 品 


2 

在 第 4 行 中 ， 我 获取 了 瓦 片 地 图 中 的 point 对 象 屋 。 但 是 这 样 做 是 不 够 的 ， 还 应 该 把 point 
对 象 层 中 所 有 的 对 象 获取 出 来 ， 第 5 行 就 是 做 了 这 样 的 一 件 事 情 。 当 获取 所 有 的 对 象 信息 后 ， 就 
可 以 遍历 它们 了 ,然后 根据 它们 的 信息 创建 并 配置 按钮 ， 这些 配置 信息 主要 是 位 置 坐 标 、 是 否 是 
Boss 关 卡 〈 见 第 13 行 )、 是 否 是 时 间 关 卡 ( 见 第 15 行 )、 是 否 是 随机 关卡 ( 见 第 17 行 ) 等 。 这 些 配 
置 也 是 在 瓦 片 地 图 编辑 器 中 配置 的 ， 它 实际 上 是 point 对 象 层 中 某 个 对 象 的 自 定义 属性 值 ， 如 图 
17-3 所 示 。 


™ TiledMaptmx 


Visible 
本 12,001.93 
Y 541.06 
Width |0.00 
Height | 000 

Rotation 0.00 
BA sto op 


isTime YES 
:= 
Add Property | 
人 


图 17-3 ”关卡 类 型 配置 


Ds. 
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第 24 行 是 一 行 不 起 眼 但 又 非常 重要 的 代码 ， 它 设 定 了 当前 按钮 的 cag 值 ， 实 际 上 就 是 当前 的 


关卡 数 ， 索 引 从 0 开始 ， 即 0 表示 第 1 关 ，1 表 示 第 二 关 ， 以 此 类 推 。 
最 后 ， 第 25 行 给 关卡 按钮 添加 了 触摸 事件 监听 器 。 事 件 响 应 函数 onLevelButton] 


的 逻辑 代码 如 下 : 
// 事件 [关卡 按钮 ] 


onLevelButtonEvent : function(sender, type)t{ 
switch (type) { 
case ccui.Widget .TOUCH ENDED: 
var level = sender.getTag(); // 当前 等 级 
// TODO: 加 载 关 卡 数 据 ， 进 入 游戏 
break; 
} 
} 


‘OJJDPODP 


Event () 


很 显然 , 在 onLevelButtonEvent () 函数 中 , 我 们 要 做 的 事情 就 是 将 当前 按钮 的 cag 值 获取 
出 来 ， 这 个 tag 值 就 是 关卡 ， 然 后 根据 tag 值 加 载 对 应 关卡 的 数据 ， 最 后 进入 游戏 场景 。 但 是 ， 
不 要 急 ， 本 市 先 完成 关卡 选择 页 面 的 开发 ， 关 卡 数据 加 载 等 将 在 后 面 讲解 ， 这 里 可 以 留 下 一 个 


TODO 标 记 。 


最 后 ， 在 CLBackgroundLayer.onEnter() 方 法 中 调用 1oadTilegdMap () 困 数 ， 运 行 一 下 


项 目 ， 得 到 的 结果 如 图 17-4 所 示 。 至 此 ，135 个 关卡 按钮 开发 完成 。 


-OO 


图 17-4 ”完成 的 关卡 按钮 


17.1.2 关卡 之 间 的 连 线 开发 


从 图 17-1 中 可 以 看 到 ,《 保 卫 葛 卜 2 》 在 完成 某 一 个 关卡 之 后 ， 会 有 一 条 “ 走 过 的 路 "， 这 个 


功能 的 实现 代码 比较 简单 ， 具 体 如 下 : 
1 // 加 载 [关卡 道路 ] 


2 loadRoute: function (level) { 
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3 var node = null; 

4 for (var i = 0; i < level - 1; i++) { 

5 node = new cc.Sprite("#route "+ (i +1) + ".png"); 

6 和 下 1 和 二 0 语 本 7 295 大 -区 

7 node.setAnchorPoint (0, 0.5); 

8 } 

9 node.x = node.width / 2 + Math.floor(i / 10) * node.width; 
10 node.y = this.scorllView.getInnerContainerSize() .height / 2; 
下 由 this.scorllView.addChild(node, this.zOrderMap.route); 

12 } 

13 } 


loadRoute (level) 函数 接收 一 个 Number 类 型 的 参数 ， 这 个 参数 表示 关卡 ， 整 个 
loadRoute (level) 函数 的 代码 实现 不 过 12 行 而 已 。 或 许 你 会 很 省 异 , 就 这 短 短 的 12 行 代码 就 实 
现 了 道路 的 功能 ”实际 上 , 道路 的 实现 代码 可 以 如 此 简单 ， 是 因为 在 图 片 资源 上 , 已 经 默认 帮 有 我 
们 对 好 坐标 位 置 了 。 但 是 需要 注意 的 是 , 每 隔 10 张 需要 调整 当前 道路 的 锚 点 , 这 也 是 受 图 片 资源 
的 影响 。 浏 览 一 下 随 书 资源 res/ChooseLevel/Route 文 件 夹 下 的 道路 图 片 ， 便 可 非常 直观 地 感受 到 
这 一 设计 技巧 。 

另外 ,第 $ 行 取 的 图 片 是 精灵 表单 中 的 资源 ,所 以 你 应 该 可 以 想到 我 会 在 chooseLevelScene 
( 位 于 src/Scene/ChooseLevel/ChooseLevel.js ) 对 象 中 的 1oadqResource () 函数 加 载 了 精灵 表单 资 
源 。 那 么 ， 这 里 到 底 为 什么 要 用 精灵 表单 呢 ? 这 是 因为 每 一 张 道路 图 片 的 大 小 都 是 960 x 640， 
但 是 每 张 图 片 中 的 “有 效 内 容 ” 又 是 非常 少 , 大 部 分 都 是 透明 区 域 ， 如 果 把 这 些 道路 图 片 做 成 精 
灵 表 单 , 那么 134 张 的 图 片 就 “压缩 ”到 了 如 图 17-5 所 示 的 精灵 表单 ， 这 样 的 话 ， 如 果 你 是 在 Web 
环境 下 开发 《保卫 萝卜 2》， 那么 在 没有 使 用 精灵 表单 之 前 ， 需 要 从 服务 器 下 载 134 张 道路 图 片 ， 
但 是 用 了 精灵 表单 之 后 ,只 需 下 载 一 个 .plist 文 件 和 一 张大 小 为 2048 x 2048 的 精灵 表单 即 可 。 这 不 
管 是 在 Native 上 ， 还 是 在 Web 中 ， 都 将 极 大 地 提高 了 资源 读 取 的 速度 。 
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route_100.png 
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route_103.png 
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route_108.png 
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route_11.png 
route_110.png 
route_111.png 
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route_114.png 
route_115.png 
route_116.png 
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route_118.png 
route_119.png 
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route_120.png 
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route_122.png 
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7 Size: 2048x2048 (16384kB) 


图 17-5 制作 道路 精灵 表单 
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说 明 在 实际 开发 中 ,做 Demo 阶 段 ， 一 般 不 会 把 所 有 的 图 片 都 制作 成 精灵 表单 ， 而 是 先 用 单 张 
的 图 片 ， 即 小 图 ， 或 称 碎 图 。 当 项 目 开发 进入 到 后 期 时 ,例如 打包 测试 ， 才 将 所 有 的 图 
片 制作 成 精灵 表单 。 


最 后 , 在 CLBackgroundLayer 的 onEnter () 方 法 中 调用 1oadRoute (level) 子 数 , 传递 一 
个 关卡 数 ， 例 如 我 传递 了 11 ， 那 么 再 运行 项 目 ， 可 以 看 到 的 效果 如 图 17-6 所 示 。 


图 17-6 ”道路 开发 完成 


17.1.3 ”关卡 按钮 特效 节点 开发 


关卡 按钮 特效 的 实现 ， 实 际 上 是 在 一 个 节点 中 创建 了 3 个 精灵 ， 然 后 特效 节点 依次 重复 运行 
一 组 组 合 动作 , 便 产 生 了 “ 涟 洲 ” 的 波纹 效果 , 具体 参见 src/Scene/ChooseLevel/Node/RouteButton- 
Effect.js 文 件 。 


17.2 ”游戏 管理 对 象 GameManager 的 开发 


塔 防 类 游戏 一 般 都 有 许多 的 关卡 ， 每 个 关卡 的 玩法 都 一 样 ， 不 同 的 只 是 在 关卡 数据 配置 上 。 
所 以 ， 我 可 以 设计 一 个 游戏 管理 对 象 (GameManager )， 用 来 管理 每 一 关 所 需要 的 数据 。 

在 本 书 编写 的 Carrot 项 目 中 ， 我 将 数据 分 为 两 大 块 ， 一 块 为 关卡 数值 数据 ， 另 外 一 块 为 关卡 
道路 、 障 碍 物 配置 等 数据 。 这 两 块 数据 在 实际 开发 中 , 一般 都 是 由 策划 去 配置 的 。 前 者 我 用 代码 
直接 编写 ， 后 者 使 用 Tiled Map Editor 编 辑 器 编辑 。 整 个 游戏 核心 玩法 的 结构 图 如 图 17-7 所 示 。 
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游戏 玩法 场景 


GamePlayScene 


游戏 数据 管理 对 象 


GameManager 


通过 TiledMap 配 


关卡 数值 数 扩 


LevelData 


图 17-7 游戏 核心 玩法 设计 结构 


17.2.1 关卡 数值 配置 


LevelData 实 际 上 为 一 个 数组 ， 其 中 保存 着 每 一 关 的 关卡 数值 数据 ， 例 如 第 1 关 的 数值 如 下 
( 详 见 src/Data/LevelData.js ): 


1 var LevelData = |[ 

2 { ”// 第 1 关 

3 themeID pa // 主题 

4 group : 6， // 组 数 

5 gold : 800, // 初始 金币 

6 enemyInterval De // 刷 怪 时 间 间 隔 
7 groupInterval pt // 组 数 时 间 间 隔 
8 levelName : "level 1", // 关卡 名 字 

9 blood OO; // 药 直 血 量 

10 

站 下 monsterGroup : [ // 每 一 关 的 怪物 数据 

有 { // 第 1 组 

13 index : 1， 

14 team : |[ 

19 { name : "L11", count : 5, blood : 5.0, speed : 180 } 
16 ] 

E7 } 

18 oe 

19 ] 

20 } 

21 ]; 


可 以 看 到 ， 每 一 关 都 配置 有 主题 、 组 数 、 初 始 金币 、 刷 怪 时 间 间 隔 、 组 数 时 间 间 隔 、 关 卡 名 
字 以 及 曾 下 自 量 这 些 基 而 信息 - 
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此 外 , 每 一 关 的 所 有 怪物 的 基本 数据 都 被 配置 在 nonsterGroup 数 组 中 , 然后 team 数 组 又 存 
放 着 当前 组 中 每 一 队 的 怪物 数据 。 例 如 ,下面 的 配置 表示 的 是 当前 组 有 3 队 怪 物 , 第 1 队 怪 物 的 名 
字 是 L31， 数 量 为 5， 血 量 为 40， 怪 物 移动 速度 为 180， 第 2 队 和 第 3 队 同 理 : 


1 team : |[ 

2 { name : "L31", count : 5, blood : 40.0, speed : 180 }, 
3 { name : "L11", count : 5, blood : 40.0, speed : 180 }, 
4 { name : "L21", count : 5, blood : 45.0, speed : 180 } 


Ee 
需要 注意 的 是 , 这 里 我 让 怪物 的 名 字 和 怪物 的 图 片 名 字 对 应 , 这 样 便 可 以 通过 怪物 名 字 直 接 
得 到 对 应 怪物 的 图 片 资源 ， 从 而 创建 出 怪物 精灵 。 


17.2.2 ”GameManager 编写 


有 了 关卡 数值 数据 之 后 ， 便 可 以 开始 编写 游戏 管理 对 象 GameManager 了 。 在 编写 
GameManager 对 象 之 前 » 我 们 可 以 先 列 下 需求 点 9 即 希望 GameManager 实 现 哪些 功能 9 提供 哪 
些 接口 等 。 

前 面 我 已 经 提 到 过 ，GameManager 的 主要 功能 就 是 管理 游戏 的 数据 对 象 ,《 保 卫 萝 卜 2》 的 
出 怪 规则 是 一 组 怪物 一 组 怪物 的 出 来 ， 所 以 ,日 前 你 应 该 至 少 想到 5 GameManager 至 少 需要 提 
供 一 个 读 取 关 卡 数据 的 接口 和 一 个 pop( 弹出 ) 下 一 组 怪物 数据 的 接口 。 

接 下 来 ， 就 来 正式 编写 cameManager 对 象 。 首 先 ， 在 src 文 件 夹 下 新 建 一 个 Manager 文 件 夹 ， 
然后 再 新 建 一 个 JS 脚 本 文件 ， 并 将 其 命名 为 GameManager， 最 后 在 GameManager.js 中 定义 出 游戏 
管理 对 象 GameManager， 并 在 GameManager 对 象 中 声明 相关 的 属性 ， 代 码 如 下 : 


1 // 游戏 管理 对 象 

2 Var GameManager = { 

3 level :7 0 // 关卡 [从 0 开始 ] 

4 levelData 3 ls // 关卡 [数据 ] 

5 themeID : 0， // 主题 

6 monsterGroup [es // 怪物 [数据 ] 池 

7 group : 0， // 组 别 

8 maxGroup : 0， // 组 别 [ 最 大 值 ] 

9 _groupIndex 0 ， // 组 别 索 引 [ 仅 在 遍历 时 使 用 ] 
10 carrotBlood 0 ， // 莫 下 的 血 量 

2 golda : 0， // 初始 金币 

2 enemyInterval 0 // 刷 怪 时 间 间 隔 

ee groupInterval 0， // 组 数 时 间 间 隔 

14 levelName : 0， // 关卡 名 字 

15 

16 // [获取 下 一 个 怪物 数据 ] 相 关 属 性 

17 _teamIndex : 0， // 队伍 游标 

18 _teamCount : 0， // 队伍 总 数 

19 _teamMonsterCount : 0， // 当前 队伍 怪物 总 数 
20 _teamMonsterIndex : 0， // 当前 队伍 怪物 游标 
2 isMonsterGetFinish : false, // 所 有 怪物 是 否 获 取 完 毕 


DD 
DD 
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23 // [弹出 下 一 组 怪物 数据 ] 相 关 属 性 

24 _monsterDataArray 外 // 怪物 数据 二 维 数组 

之 3 

26 currMonsterDataPool 5 [Es // [当前 ] 怪 物 数据 池 
27 currMonsterPool 7 // [当前 ] 怪 物 节点 池 
28 currBulletPool 有 用 // [当前 ] 子 弹 节点 池 
29 

30 isWin : false, // 是 否 启 了 

3 2 

2 


需要 说 明 的 是 ，_groupIngdex 属 性 仅 在 GameManager 对 象 内 部 遍历 出 所 有 的 怪物 数据 时 用 
到 ， 它 并 不 表示 当前 的 组 数 。 


第 17 行 到 第 21 行 主要 服务 于 遍历 出 当前 组 所 有 怪物 数据 的 相关 函数 。 


第 26 行 到 第 28 行 保存 着 当前 组 的 怪物 数据 、 怪 物 节 点 以 及 子弹 节点 , 这 些 在 后 面 的 代码 中 都 
将 用 到 。 


说 明 在 GameManagetr 对 象 内 ， 所 有 以 下 划 线 (_) 开头 的 成 员 属 性 或 方法 都 表示 私有 的 ， 它 们 
仅 在 GameManager 对 象 内 部 使 用 。 


1. 加 载 关 卡 数据 


接 下 来 ， 给 cameManager 对 象 编写 一 个 1oadqLevelData() 图 数 ， 用 来 加 载 指定 关卡 的 关卡 
数据 。 相 关 代 码 如 下 : 


1 // 加 载 [ 关 卡 数据 ] 

2 loadLevelData : function (level) { 

3 this.level = level; 

4 this.levelData = LevelDatallevell]; 

5 this.themeID = this.levelData.themeID; 

6 this.monsterGroup = this.levelData.monsterGroup; 
办 this .group 0 

8 this.maxGroup = this.monsterGroup.length - 1; 
9 this. groupIndex 2 0 

TO this.carrotBlood = this.levelData.blood; 

1 this.gold = this.levelData.gold; 

12 this.enemyInterval = this.levelData.enemyInterval; 
:3 this.groupInterval = this.levelData.groupInterval; 
14 this.levelName = this.levelData.levelName; 

15 

16 this. teamIndex SA 

下 了 this. teamCount = this.monsterGroup [0] .team.length - 1; 
18 this. teamMonsterIindex = 0; 

9 this. teamMonsterCount = this.monsterGroup[0] .team[0] .count - 1; 
20 this.isMonsterGetFinish = false; 

el 

22 this. monsterDataArray 一 


DD 
[9] 
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24 this.currMonsterDataPool = []; 
25 this.currMonsterPool Sr 
26 this.currBulletPool 三 
2 

28 this.isWin = false; 

29 

30 // 加 载 [怪物 数据 ] 

31 this._loadMonsterData(); 

32 让 


loadLevelData (level) 内 部 实现 的 代码 就 是 根据 传递 进来 的 关卡 编号 加 载 对 应 的 数据 。 
另外 需要 特别 注意 的 是 ， 在 loaqLevelData(level) 函数 中 ， 除 了 加 载 数据 之 外 ， 还 要 重 置 对 
应 的 数组 , 例如 第 22 行 到 第 26 行 。 这 样 保证 了 在 读 取 当前 关卡 数据 以 及 进入 到 下 一 关 的 时 候 , 能 
保证 所 有 的 数据 都 干净 、 独 立 。 

2. 加 载 所 有 怪物 数据 

在 loadLevelData (level) 函数 中 可 以 看 到 ， 第 31 行 调用 了 _1loadqMonsterData() 函数 ， 
此 函数 读 取 当 前 关卡 所 有 的 怪物 数据 , 并 保存 在 _monsterDataaArray 二 维 数组 中 , 其 代码 如 下 : 


1 // 加 载 [怪物 数据 ] 

2 _loadMonsterData : function(){ 

3 Var group; // 组 

4 var team; // 队 

与 Var unit; // 只 

6 var data = {}; 

7 this. monsterDataArray = []; 

8 for (group = 0; group < this.monsterGroup.length; group++) { 
9 this. monsterDataArray[lgroup] = []; 


for (team = 0; team < this.monsterGroup [group] .team.length; team++) { 
for (unit = 0; unit < this.monsterGroup [group] .team[team] .count; 
unit++) { 

data = this._ getNextMonsterData(); 

this. monsterDataArray[group] .push (data); 


OAD 
_- 


lL 


上 面 的 代码 经 过 3 层 人 遍历， 把 所 有 的 怪物 数据 都 获取 出 来 ， 并 保存 在 _monsterDataArray 
二 维 数组 中 。 举 个 例子 ， 从 第 1 组 开始 ， 数 据 代码 如 下 : 
{ // 第 1 组 
index : 1, 
team : |[ 
{ name : "L11", count : 5, blood : 5.0, speed : 180 } 


l 


QU 性 NI 


上 面 代 码 表示 第 1 组 有 5 个 一 样 的 怪物 ,怪物 的 名 字 ( 这 里 我 以 怪物 图 片 命名 ,实际 上 你 也 可 
以 理解 为 类 型 ) 为 L11， 血 量 为 5.0， 移动 速 度 为 180， 那 么 经 过 _1loagdMonsterData() 限 数 处 理 
之 后 ,第 1 组 怪物 的 数据 _monsterDataArray[0] 的 长 度 就 是 5， 里面 保 存 了 第 1 组 中 所 有 的 5 个 
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怪物 的 数据 。 再 看 看 第 3 组 怪物 的 数据 ， 如 下 : 


{// 第 3 组 
index : 3， 
team : |[ 
{ name : "L21", count : 5, blood : 20.0, speed : 180 }, 
{ name : "L31", count : 10, blood : 15.0, speed : 180 } 
] 


1 
p 
3 
4 
5 
6 
第 3 组 怪物 总 共有 15 个 ， 第 1 队 有 5 个 怪物 ， 它 们 的 怪物 名 字 是 L21， 血 量 为 20.0， 移 动 速度 为 
180。 第 2 队 有 10 个 怪物 ， 怪 物 名 字 为 L31， 血 量 为 13.0， 移 动 速度 也 为 180。 同 样 ， 经 过 
_loadMonsterpata() 函数 处 理 之 后 ， 第 3 组 怪物 的 数据 _monsterDataaArray[2] 的 长 度 就 是 
15$， 前 5 个 数据 保存 的 是 第 1 队 怪 物 的 数据 ， 后 面 10 个 保存 的 是 第 2 队 怪物 的 数据 ， 如 图 17-8 所 示 。 


_monsterDataArray 


_monsterDataArray[0] 一 一 第 1 组 


_monsterDataArray[1] 一 一 第 2 组 


_monsterDataArray[2] 一 一 第 3 组 


_monsterDataArray[N] 一 一 第 N+1 组 


图 17-8”_monsterDataArray 的 数据 情况 


或 者 ， 你 也 可 以 在 调用 _loadMonsterpata() 函数 之 后 ， 直 接 调 用 cc.1log(this._ 
monsterDataArray ) 函数 将 _monsterDataArray 对 象 打 印 出 来 ,此 时 也 可 以 在 Chrome Console 
中 看 到 _ monsterDataArray 的 数据 情况 。 

3. 获取 下 一 个 怪物 数据 


_loadqMonsterData() 困 数 中 的 第 12 行 调用 了 this._getNextMonsterData() 困 数 , 该 函 
数 会 返回 下 一 个 当前 关卡 的 下 一 个 怪物 。 例 如 ， 第 1 关 总 共有 60 个 怪物 ， 那 么 第 1 次 调用 
_getNextMonsterData() 国 数 ,将 返回 第 1 个 怪物 数据 , 第 $0 次 调用 _getNextMonsterData() 
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函数 ， 将 返回 第 50 个 怪物 数据 ， 代 码 如 下 : 
/获取 下 一 个 怪物 数据 


和 


2 _getNextMonsterData : function(){ 

3 if (this.isMonsterGetFinish == true) { 

4 cc.warn ("GameManager. _ getNextMonsterData() : 所 有 怪物 数据 已 经 获取 完毕 1 "); 
起 return; 

6 } 

7 

8 var teamData = this.monsterGroup [this._ groupIndex| .team[this. teamIndex]: 
9 Var monsterData = {}; 

10 monsterData.group = this. groupIndex; 

11 monsterData.name = teamData.name; 

2 monsterData.blood = teamData.blood; 

BB 沪 monsterData.speed = teamData.speed; 

14 monsterData.index = this. teamMonsterIndex; 

小 5 

16 this. teamMonsterIndex++; 

ik // 是 否 进入 到 下 一 队 

18 if (this. teamMonsterIindex > this. teamMonsterCount) { 
29 this._ enterNextTeam(); 

20 } 

21 

这 这 return monsterData; 

23 3 


在 上 述 代码 中 ; 第 8 行 根据 _groupIndex 和 _teamIndex 下 标 ， 在 monsterGroup 数 组 中 获 
取出 对 应 的 怪物 数据 ， 获取 一 次 ，_teamMonsterIndex 执 行 加 一 操作 。 当 
_teamMonsterIindex 大 于 _teamMonsterCount 时 > 就 应 该 进 人 到 下 一 队 大 To 
_enterNextTeam() 函数 的 代码 如 下 : 


1 // 进入 到 下 一 队 

2 _enterNextTeam : function(){ 

3 this. teamMonsterIndex = 0; 
4 this. teamIndex++; 

5 // 进入 下 一 组 

6 if (this. teamIndex > this. teamCount) { 
7 

8 

9 

1 

1 


TH 


this. _ enterNextGroup(); 
} 
// 进入 到 下 一 队 
0 elsel{ 
1 this. teamMonsterCount = this.monsterGroup[this. groupIndex| .team[this . 
_teamIndex] .count - 1; 
水 东 } 
13°} 


在 进入 到 下 一 队 时 ， 需 要 将 _teamMonsterIndex 的 下 标 重 置 为 0， 表 示 又 从 下 一 队 的 第 1 只 
怪物 开始 获取 ， 并 且 当 前 队伍 的 下 标 要 执行 加 一 操作 ， 表 示 进 入 到 下 一 队 了 。 


最 后 ， 第 6 行 到 第 12 行 判断 是 否 还 有 下 一 队 ， 如 果 没 有 ， 则 进入 到 下 一 组 ， 如 果 有 ， 则 重新 
设置 当前 队伍 总 的 怪物 数量 的 值 。 


第 7 行 执 行进 入 下 一 组 操作 ，_enterNextGroup () 函数 的 代码 如 下 : 
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1 // 进入 到 下 一 组 
2 _enterNextGroup : function(){ 

3 this. groupIndex++; 

4 // 添加 完毕 

5 if (this. groupIndex > this.maxGroup) { 
6 this.isMonsterGetFinish = true; 

ys 

8 


return; 
} 
9 this. teamIndex = 0; 
10 this. teamCount = this.monsterGroup [this. groupIndex] .team.length - 1; 
国有 this. teamMonsterIndex = 0; 
| this. teamMonsterCount = this.monsterGroup[this. groupIndex|] .team[this . 


_teamIndex|] .count - 1; 
13 3 


毫 无 疑问 ,首先 需要 执行 组 下 标 加 一 操作 ( 见 第 3 行 ), 表示 进入 下 一 组 了 。 然 后 第 5 行 到 第 8 
行 判断 是 否 所 有 的 怪物 都 获取 完毕 , 如 果 获 取 完 毕 , 则 标记 isMonsterGetFinish 的 值 为 Erue， 
如 果 还 没完 全 获取 出 所 有 的 怪物 数据 ， 则 继续 重新 设置 eamIndex 和 _t eamCount 等 相关 值 
这 保证 了 下 一 次 调用 _getNextMonsterData() 时 , 能 正常 获取 出 对 应 的 怪物 数据 。 获 取 下 一 只 
怪物 的 数据 的 整个 过 程 如 图 17-9 所 示 。 


monsterGroup 


第 1 组 


_teamlndex=0 
_teamMonsterlndex=0 


第 2 组 


第 1 队 


第 3 组 


第 1 队 


第 2 队 


第 11 只 怪 


图 17-9 ”获取 下 一 只 怪物 数据 的 示意 图 
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17.2.3 ”弹出 下 一 组 怪物 数据 


当 所 有 的 数据 处 理 完毕 之 后 ， 我 给 cameManager 对 象 编写 了 一 个 popNextMonsterGroup- 
Data 孙 数 ， 用 来 弹出 下 一 组 怪物 的 数据 。 这 样 在 游戏 玩法 场景 中 ， 每 次 出 怪 ， 只 要 调用 
GameManager .popNextMonsterGroupData() 国 数 便 可 以 得 到 对 应 组 的 怪物 数据 。 该 函数 的 代 
码 如 下 : 


1 /弹出 下 一 组 怪物 数据 
2 popNextMonsterGroupData : function() { 
3 var groupData = []; 
4 if (this.group <= this.maxGroup) { 
5 this.group++; 
6 groupData = this. monsterDataArray[0]; 
7 this. monsterDataArray.splice(0, 1); 
8 
9 // [ 抛 出 事件 ] 组 别 更 新 
oly Var event = new cc.EventCustom(jf.EventName .GP_ UPDATE GROUP); 
国 eVvent .SetUSerData({ 
12 group : this.group 
ee: 的 这 
14 cc.eventManager.dispatchEvent (event); 
5 }elsel{ 
16 groupData = []; 
7 } 
18 return groupData; 
3、 中 


需要 特别 注意 的 是 第 5 行 ， 我 在 这 里 更 新 了 当前 组 的 编号 。 在 当前 组 还 不 是 最 后 一 组 的 情况 
下 ， 每 次 调用 popNextMonsterGroupData() 函数 都 会 使 得 group 加 一 。 所 以 ， 当 获取 第 1 组 敌 
人 数据 的 时 候 ，group 的 值 已 经 是 1 了。 需要 注意 的 是 ， 在 弹出 下 一 组 怪物 数据 之 后 ， 如 果 需 要 
通过 当前 组 作为 相关 数组 的 下 标 ， 则 正确 的 下 标 值 应 该 是 group - 1。 


popNextMonsterGroupData 撒 数 执行 的 是 弹出 数据 操作 所 以 ， 第 6 行 每 次 得 到 的 怪物 组 数 
据 都 是 _monsterDataaArray 数 组 的 第 一 个 对 象 。 然 后 在 第 7 行 中 , 将 _monsterDataArray 数 组 
的 第 一 个 对 象 “ 剪 把 ”。 这 两 行 代码 ， 保 证 了 当前 函数 每 次 是 从 _monsterDataaArzay 执 行 弹出 
数据 操作 。 

第 9 行 到 第 14 行 抛 出 了 一 个 组 别 更 新 的 事件 ， 事 件 名 称 jf .EventName .GP_UPDATE_GROUP 
定义 在 define.js 文 件 中 。 这 个 事件 ， 将 在 游戏 玩法 场景 中 的 UI 层 去 实现 监听 。 当 组 别 更 新 时 ，UI 
层 便 可 以 收 到 组 别 更 新 的 事件 ， 从 而 更 新 当前 组 的 文本 显示 。 


说 明 Carrot 项 目 中 所 有 的 自 定 义 事件 名 称 都 定义 在 define.js 文 件 中 ， 后 面 不 再 说 明 。 


此 时 , 你 可 以 在 main.js 文 件 中 的 cc .game .onStart () 函数 里 测试 下 GameManager 对 象 , 例 
如 我 加 载 了 第 一 关 的 数据 ， 并 且 弹 出 了 3 组 怪物 数据 ， 代 码 如 下 : 
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GameManager.loadLevelData(0); 

cc.1og(GameManager.popNextMonsterGroupData()); 
cc.1log(GameManager.popNextMonsterGroupData()); 
cc.1og(GameManager.popNextMonsterGroupData()); 


再 运行 项 目 ， 可 以 在 Chrome Console 中 看 到 输出 日 志 如 图 17-10 所 示 。 


DP 


区 口 Elements Console Sources Network » 2 
© 可 <topframe> v Preserve log 


Cocos2d-JS v3.9 CCDebugger.is:331 
Pp [Object, Object, Object, Object, Object] CCDebugger.js:331 
Pp [Object, Object, Object, Object, Object] CCDebugger. js:331 


CCDebugger.is:331 
v [Object, Object, Object, Object, Object, Object, Objects Object 
, Object, Object, Object, Object, Object, Object, ObJject] 
p00: Object 
Pp1: Object 
2: 0bject 
v3: 0bject 
blood: 20 
group: 2 
index: 3 
name: "L21" 
speed: 180 
Pp__proto_: 0bject 
4: Object 
Pp5: Object 
v6: Object 
blood: 15 
group: 2 
index: 1 
name: "L31" 
speed: 180 
Pp__proto_: Object 
p7: Object 
>8: Object 
Pp9: Object 
p10: Object 
p11: Object 
p12: Object 
P13: Object 
P14: Object 
length: 15 
p__proto_: Array[0] 


图 17-10 ”GameManager 弹 出 的 3 组 怪物 数据 


17.3 ”游戏 玩法 场景 开发 


我 将 游戏 玩法 场景 定义 为 GamePlayScene， 它 里 面包 含 了 4 个 显示 的 层 ， 分 别 是 背景 层 
( GPBackgroundLayer )、 游 戏 玩法 层 ( GPMainLaver )、UI 层 (GPUILayer ) 和 一 个 隐藏 的 菜 
单 层 (GPMenuLayer )。 最 底层 的 是 背景 层 ， 中 间 层 是 玩法 层 ， 最 上 面 的 是 UI 层 ， 而 菜单 层 则 是 
ee 整个 GamePlavyScene 场 景 开 发 完成 的 项 目 情况 如 图 
17-11 所 示 。 
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图 17-11 GamePlay 场 景 完成 


17.3.1 GamePlayScene 开发 


在 src/Scene 下 新 建 GamePlay 以 及 GamePlay/Layer 等 子 文件 夹 , 并 在 src/Scene/GamePlay 文 件 夹 
中 新 建 了 GamePlay.js 文 件 ， 然 后 在 src/Scene/GamePlay/Layer 路 径 下 新 建 Background.js、Main js、 


Menu.js 以 及 ULjs 文 件 来 存放 对 应 层 的 逻辑 代码 ， 完 成 之 后 的 目录 结构 如 图 17-12 所 示 。 


v 疡 src 
Pp 站 Data 
Pp 四 Manager 
v DScene 
Pp DChooseLevel 
了 DLayer 
| 咏 Background.js 
EE Main.js 
范 Menu.js 
Uljs 
癌 Node 
莘 GamePlayjs 


图 17-12” GamePlayScene 场 景 相关 代码 的 组 织 结构 


然后 在 GamePlayjs 文 件 中 编写 游戏 玩法 场景 GamePlayScene 。 与 主页 面 场景 
MainMenuScene 类 似 : 我 定义 了 loadBackgroundLayer () ,loadMainLayer() ,loadUILayer () 


以 及 1oadMenuLayer () 函数 来 加 载 对 应 的 层 ， 详 见 GamePlayjs 文 件 。 


在 GamePlaysScene 中 , 我 给 它 编写 了 一 个 register1 


Event ( ) 函数 来 注册 事件 监听 器 ,其 代 
码 如 下 : 


1 // 注册 [事件 ] 


2 registerEvent : function(){ 
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3 // [事件 监听 器 ] 创建 菜单 层 

4 Var onCreateMenuLayerListener = cc.EventListener.createl({ 

5 event : cc.EventListener .CUSTOM, 

6 target : this, 

7 eventName : jf.EventName .GP_ CREATE MENU LAYER ， 

8 callback : this.onCreateMenuLayer 

9 FE) 

10 cc.eventManager.addListener (onCreateMenuLayerListener, this); 
11 

12 // [事件 监听 器 ] 移 除 菜 单 层 

13 Var onRemoveMenuLayerListener = cc.EventListener.createl(t{ 

14 event : cc.EventListener.CUSTOM, 

北三 target : this, 

16 eventName : jf.EventName .GP REMOVE MENU LAYER ， 

do callback : this.onRemoveMenuLayer 

18 上 

]9 cc.eventManager.addListener (onRemoveMenuLayerListener, this); 
20. 


上 面 的 代码 给 camePlayScene 注 册 了 两 个 事件 监听 器 ， 监 听 的 事件 分 别 是 创建 沫 单 层 事件 
和 移 除 菜单 层 事件 ， 事件 的 回调 函数 为 oncreateMenuLayer () 和 onR moveMenuLayer () ， 这 
两 个 函数 实现 了 菜单 层 的 创建 和 删除 。 毫 无 疑问 ， 这 两 个 事件 都 是 在 UI 层 (GPUITLayer ) 中 被 
触发 的 。 这 两 个 函数 的 实现 代码 如 下 : 
onCreateMenuLayer : function(event) { 


Var self = event.getCurrentTarget ();} 
self.loadMenuLayer (); 


二 

onRemoveMenuLayer : function(event){ 
Var self = event.getCurrentTarget ();} 
self.removeChild(self.menuLayer); 


oo >~ONUD 必 ww 中 


17.3.2 ”背景 层 GPBackgroundLayer 开发 


《保卫 更 下 2》 中 有 个 主题 概念 ， 每 个 主题 的 背景 图 片 都 是 不 一 样 的 。 关 卡 主 题 也 都 配置 在 
LevelData 中 ， 主 题 可 以 通过 GameManager.getThemeID () 函数 获取 出 来 。GPBackground- 
Layer 的 代码 如 下 : 


1 var GPBackgroundLayer = cc.Layer.extendl(t{ 

2 onEnter : function () { 

3 this._super(); 

4 // 加 载 [ 背 景 ] 

5 this.loadBackgound (); 

6 sy 

7 loadBackgound : function(){ 

8 Var themID = GameManager.getThemeID(); 

9 var node = new cc.Sprite("res/GamePlay/Theme/Theme" + themID + "/BG0/BG" 


+ themID + ".png"); 
10 this.addChild (node); 
11 node.setPosition(cc.winSize.width / 2, cc.winSize.height / 2); 
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da } 
3 


17.3.3 UIl 层 GPUILayer 开发 


在 UI 层 ， 主 要 的 内 容 就 是 顶部 的 一 些 工 具 栏 和 底部 的 一 些 图 标 等 ， 所 以 cPUILayer 中 大 部 
分 的 代码 都 是 处 理 一 些 简单 的 UI 控 件 ,并 没有 比较 深入 的 内 容 。 故 此 , 我 不 打算 一 一 讲解 ,大 家 
可 以 阅读 随 书 源码 。 

你 应 该 记得 ， 在 GameManager 对 象 的 popNextMonsterGroupData () 函数 中 会 抛 出 一 个 组 
更 新 的 事件 ， 这 个 事件 是 在 GPUILayer 中 实现 监听 的 。 当 组 别 更 新 时 ，UI 显 示 的 当前 组 的 文本 
内 容 也 需要 更 新 ， 所 以 ， 应 该 在 GPUILayer 中 注册 这 一 事件 监听 ， 相 关 代 码 如 下 : 


1 var GPUILayer = cc.Layer.extendl({ 

2 ee 

3 onEnter : function(){ 

4 this._super(); 

5 YY 

6 // 注册 [事件 ] 

7 this.registerEvent (); 

8 3 

9 registerEvent : function(){ 

10 // 组 更 新 

I Var onUpdateGroupListener = cc.EventListener.createl({ 
$2 event : cc.EventListener.CUSTOM, 

3 target : this, 

14 eventName : jf.EventName .GP_ UPDATE GROUP, 
1 callback : this.onUpdateGroup 

16 3 学 

17 cc.eventManager.addListener (onUpdateGroupListener, this); 
18 二 

i onUpdateGroup : function(event)t{ 

20 Var group = event .getUserData() .group; 

2 二 Var self = event.getCurrentTarget (); 

多 SelLf.groupText .setString(group + "0 ) 

23 } 

24 }); 


在 第 15 行 中 可 以 看 到 ， 组 更 新 事件 监听 右 的 事件 回调 函数 为 this .onUpdateGroup， 该 函 
数 接收 一 个 事件 对 象 参 数 event ， 该 参数 携带 的 用 户 数据 中 保存 了 当前 是 哪 一 组 ， 这 在 第 20 行 中 
被 获取 出 来 ， 然 后 第 22 行 更 新 了 组 的 文本 显示 。 需 要 说 明 的 是 ， 当 前 组 已 经 在 GameManager. 
popNextMonsterGroupData() 国 数 中 执行 过 加 一 操作 了 ， 所 以 这 里 无 需 再 加 一 了 。 


此 时 可 以 在 main.js 文 件 中 的 cc .game .onstart () 困 数 里 编写 如 下 代码 : 


1 cc.LoaderScene.preload(g gamePlay resources, function () { 
之 GameManager.loadLevelData(0); // 加 载 第 一 关 的 数据 

名 cc.director.runScene (new GamePlayscene()); 

4 }, this); 
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需要 说 明 的 是 ，g_gamePlay_resources 为 游戏 场景 所 需要 的 素材 数组 。 这 样 做 的 方式 使 
得 游戏 在 启动 的 时 候 ， 只 从 服务 器 上 下 载 游戏 玩法 场景 中 所 需 的 资源 , 绕 过 了 游戏 主页 面 、 游 戏 
关卡 选择 页 面 ， 直 接 进 入 到 GamePlaySscene， 节 省 了 一 些 等 待 时 间 。 


此 时 ， 再 运行 一 下 项 目 ， 可 以 看 到 效果 如 图 17-13 所 示 。 


NG NN A de Nt 


图 17-13 ”游戏 场景 背景 层 和 UI 层 开发 完成 


17.3.4 菜单 层 GCPMenuLayer 开发 


前 面 提 到 过 ，GamePlayscene 中 有 一 个 隐藏 的 菜单 层 ， 这 个 层 是 通过 点 击 cPUILayer 中 的 
菜单 按钮 后 所 创建 出 来 的 。 这 个 按钮 的 创建 代码 如 下 : 


1 // 加 载 [菜单 按 鱼 ] 

2 loadMenuButton : function () { 

2 Var node = new ccui.Button(); 

4 et 

5 node.addTouchEventListener (function(sender, type) { 

6 switch (type) { 

也 case ccui.Widget .TOUCH_ENDED : // 触摸 事件 结束 时 响应 

8 Var event = new cc.EventCustom(jf.EventName .GP CREATE MENU_ 
LAYER); 

| cc.eventManager.dispatchEvent (event); 

10 break; 

在 汪 } 

12 }.bind(this)); 

1 


第 8 行 创建 了 一 个 名 字 为 jf .EventName .GP_CREATE_MENU_LAYER 的 创建 菜单 层 自 定义 事 
件 ， 然 后 第 9 行 通过 事件 管理 对 象 cc .eventManager 分 发 出 去 。 因 为 我 们 在 camePlaySscene. 
registerEvent () 隐 数 中 注册 了 这 一 事件 的 监听 ， 所 以 当 cPUILayer 中 的 菜单 被 点 击 后 ， 
GamePlayScene 收 到 事件 ， 从 而 调用 onLoadMenuLayer () 函数 创建 出 GPMenuLayer 层 ， 并 添 


加 到 GamePlaysScene 中 。 
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GPMenuLayer 中 的 代码 , 无 非 也 就 是 一 些 UI 控 件 的 组 合 ( 详 见 Menu.js ), 但 是 这 里 我 提 一 下 
打开 GPMenuLayer 之 后 ,游戏 暂停 和 恢复 的 设计 ， 相 关 代 码 如 下 : 


1 var GPMenuLayer = ccui.Layout .extend ({ 


2 onEnter : function(){ 

3 this._ super(); 

4 cc.director.pause(); // 导演 暂停 
5 et 

6 ky 

7 onExit : function(){ 

8 cc.director.resume(); // 导演 恢复 
8 this._ super(); 

10 } 

2 六 沁 光 


第 2 行 到 第 6 行 通过 在 cPMenuLayer 的 onEnter () 函数 中 调用 cc.director.pause() 函数 
实现 了 游戏 暂停 ， 然 后 在 onExit () 函数 中 又 调用 了 cc .director.resume () 函数 恢复 了 游戏 。 
游戏 的 暂停 和 恢复 放 在 GPMenuLayer 生 命 周期 的 进入 函数 onEnter () 以 及 退出 函数 onExit () 
中 是 一 个 不 错 的 选择 。 


此 时 ， 再 运行 项 目 ， 点 击 UI 层 中 的 菜单 按钮 ， 可 以 看 到 页 面 如 图 17-14 所 示 。 至 此 ， 除 了 游 
戏 玩 法 层 ( GPMainLayer ) 之 外 ， 其 余 的 层 都 开发 完毕 了 。 


图 17-14 ”菜单 层 


17.3.5 ”游戏 玩法 层 (GPMainLayer) 
GPMainLayer 的 开发 ， 是 Carrot 的 重点 ,也 是 难点 。 在 开发 之 前 , 我 先 把 cPMainLayer 中 要 
做 的 主要 事情 罗列 出 来 ， 具体 如 下 。 


口 根据 配置 加 载 怪物 移动 路 径 。 
口 根据 配置 加 载 怪物 。 
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口 根据 配置 加 载 障碍 物 。 
口 根据 配置 加 载 起 点 和 终点 。 
口 判断 当前 位 置 是 否 可 以 创建 炮塔 ， 若 可 以 则 创建 ， 若 不 行 ， 则 给 出 警告 。 
口 子弹 和 怪物 的 碰撞 检测 。 
口 游戏 胜利 或 失败 的 场景 跳 转 。 

有 了 任务 清单 之 后 ， 开 发 的 逻辑 就 变 得 清晰 一 些 了 ， 现 在 一 件 一 件 来 。 首 先 ， 先 给 
GPMainLayer 定 义 出 相关 的 属性 ， 代 码 如 下 : 


1 var GPMainLayer = cc.Layer.extend({ 

2 tiledMap : null，// 瓦 片 地 图 

3 tileSize : null，// 瓦 片 大 小 

4 roadPointArray 0 // 怪物 路 径 

5 ZOrderEnum 六 // 对 象 层级 枚 举 

6 

7 carrot 2 // 草 下 [对 象 ] 

8 carrotHpBg : {}, // 药 下 [ 血 量 背 景 ] 

9 carrotHpText 2 // 蔓 下 [ 血 量 ] 

10 

tiledMapRectArray pi // 瓦 片 地 图 区 域 [ 二 维 区 域 ] 
涉 tiledMapRectArrayMap: []， // 瓦 片 地 图 区 域 映 射 

13 tiledMapRectMapEnemu: {}, // 瓦 片 地 图 区 域 映射 枚 举 
14 touchWwarningNode : null，// 触摸 警告 节点 

15 towerPanel : null，// 构建 塔 的 面板 

16 

7 currGroupCreatedMonsterCount : 0, // 当前 组 已 经 创建 的 怪物 数量 
18 currGroupCreatedMonsterSum : 0， // 当前 组 怪物 总 数量 
19 onEnter: function () { 

2:0 this. super(); 

2 注 ee 

22 } 

23. 中 


这 些 属 性 ， 你 先 大 概 浏览 一 下 ， 保 证 脑 中 有 个 概念 即 可 ， 后 面 会 接触 到 。 
接 下 来 ,我 们 先 把 怪物 的 移动 路 径 创 建 出 来 。 
1. 加 载 怪物 移动 路 径 
在 《保卫 更 下 >》 中 ， 怪物 的 移动 路 径 设 定 在 对 应 的 路 径 图 片 中 ， 所 以 程序 只 需要 获取 出 当前 
的 主题 和 关卡 ， 就 能 得 到 对 应 的 路 径 图 片 。 加 载 怪 物 的 移动 路 径 图 片 的 代码 比较 简单 ， 具 体 如 下 : 
// 加 载 [ 路 径 背 景 ] 


J 
2 loadPath : function(){ 

3 Var themeID = GameManager.getThemeID(); 
4 

5 


Var level = GameManager.getLevel() + 1; 
var node = new cc.Sprite("res/GamePlay/Theme/Theme" + themeID + "/BG" + level 
+ "/Path" + level + ".png"); 
6 this.addChild (node); 
node.setPosition(cc.winSize.width / 2, cc.winSize.height / 2); 
8 叶 
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可 以 看 到 ， 第 4 行 获取 出 了 当前 的 关卡 ， 但 是 执行 了 加 一 操作 ， 这 是 因为 图 片 资源 命名 从 1 
开始 ， 但 是 关卡 数 从 0 开始 。 

第 5 行 根据 主题 和 关卡 数 找到 了 对 应 的 路 径 图 片 , 并 创建 出 了 精灵 节点 。 第 7 行 把 这 个 路 径 几 
片 定位 在 当前 场景 的 正中 间 。 此 时 ， 再 运行 一 下 项 目 ， 可 以 看 到 效果 如 图 17-15 所 示 。 


4 1/6 mew EO x PE := > 


oo 和 oy 


ey) 


es 


A NN 


图 17-15 ”怪物 移动 路 径 


2. 关卡 配置 数据 一 一 瓦 片 地 图 加 载 


在 《保卫 萝卜 2》 项 目 中 , 美术 给 出 了 每 一 个 关卡 障碍 物 等 的 示意 图 ( 见 res/GamePlay/Theme/ 
Theme1/BG[x] 文 件 来， 其 中 x 表示 关卡 数 )， 例 如 第 一 关 的 场景 情况 如 图 17-16 所 示 。 


图 17-16 第 一 关 道 路 和 障碍 物 情况 


我 们 可 以 直接 把 这 张 图 片 拖 进 Tiled Map Editor 编 辑 器 中 ， 然 后 像 之 前 标记 选择 关卡 按钮 的 
位 置 那样 ， 标 记 出 怪物 的 移动 路 径 坐 标点 以 及 其 他 障碍 物 的 位 置 。 那 么 ， 现 在 就 来 试 试看 如 何 
在 Tiled Map Editor 编 辑 器 中 编辑 这 些 关卡 配置 吧 。 
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在 《保卫 葛 卜 2》 中， 小 障碍 物 的 大 小 为 70 x 70。 也 就 是 说 ， 我 们 新 建 瓦 片 地 图 的 时 候 ， 
一 个 瓦 片 块 的 大 小 也 应 当 设 置 为 70 x 70。 另 外 ， 图 17-16 的 大 小 为 910 x 490， 宽 和 高 都 除 以 70 之 
后 ， 可 以 得 到 要 新 建 的 瓦 片 地 图 的 地 图 大 小 应 该 为 13 x 7。 


接着 要 进行 的 操作 步 又 如 下 所 示 。 

(1) 将 瓦 片 地 图 文件 保存 在 res/GamePlay/Theme/Theme1/BG1 文 件 夹 下 , 并 将 其 命名 为 Levell 。 
(2) 将 res/GamePlay/Theme/Theme1/BG1/1.png 图 片 拖 进 瓦 片 地 图 编辑 器 的 图 块 面板 中 。 

(3) 修改 默认 图 层 的 名 称 为 bg。 

(4) 选中 bg 图 层 ， 选 中 “图 章 刷 ”工具 ， 选 择 图 块 1 中 所 有 的 瓦 片 ， 在 bg 层 中 “ 印 ” 出 来 。 
(5) 创建 一 个 对 象 层 ， 并 将 其 命名 为 road， 用 来 保存 怪物 的 移动 路 径 。 

接 下 来 ,标记 出 怪物 的 移动 路 径 。 选 中 roag 对 象 层 ， 再 选中 “插入 和 矩形” 工具， 然后 在 地 


图 编辑 区 域 中 插入 和 矩 形 ， 从 而 标记 出 坐标 点 ， 如 图 17-17 所 示 。 


eae 于 Level1.tmx 


当前 属 : road . Box 加 

图 17-17 怪物 移动 路 径 标 记 

这 里 需要 特别 注意 的 是 , 插入 矩形 的 时 候 一 定 要 有 顺序 , 按照 怪物 的 移动 路 径 一 个 一 个 标记 
出 来 ， 否 则 在 代码 中 获取 出 来 的 路 径 将 会 出 现 异常 。 


有 了 上 面 的 坐标 标记 之 后 , 怪物 每 次 在 移动 的 时 候 , 只 要 获取 当前 坐标 标记 点 和 下 一 个 拐角 
的 坐标 标记 点 ， 然 后 执行 一 个 moveTo 动 作 便 可 以 实现 根据 路 径 移 动 了 。 


然后 ， 我 们 在 代码 中 将 瓦 片 地 图 读 取 出 来 ， 相 关 代码 如 下 : 
1 // 加 载 [ 瓦 片 地 图 ， 主 要 是 一 些 关 卡 信息 配置 ] 


2 loadTiledMap : function(){ 
六 Var themeID = GameManager.getThemeID(); 17 
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4 Var level = GameManager.getLevel() + 1; 
5 var node = new cc.TMxXxTil]ledMap ("res/GamePlay/Theme/Theme" + themeID + "/BG" + 
lJevel + "/Level" + level + ".tmx"); 


6 this.addChild (node); 

this.tiledMap = node; 

8 this.tileSize = node.getTileSize(); 

9 node.x = (cc.winSize.width - node.width) / 2; 
node.y = (cc.winSize.height - node.height) / 2; 


node.setVisible(false); 


// 设置 [所 有 对 象 组 ] 坐标 偏 移 量 
var groups = this.tiledMap.getObjectGroups (); 
Var group = null; 
var offsetX = (cc.winSize.width - this.tiledMap.width) / 2; 
var offsetY = (cc.winSize.height - this.tiledMap.height ) / 2; 
Var finalOffsetX = 0; 
var finalOffsetY = 0; 
Var groupName = "™"; 
for (var i = 0; i < groups.length; i++) { 
group = groups[i]; 
groupName = group.getGroupName (); 


if (groupName == "road") { 
finalOffsetxXx = offsetX + this.tileSize.width / 2; 


PPDIDIPDNBDNRDPD 履 户 必 上 记忆 上 记忆 情 
NONDPOCOooo、~、OUm 和 ww PO 


2 finalOffsetY = offsetY + this.tileSize.height / 2; 

28 J}elsel 

29 cc.warn("GPMainLayer.loadTiledMap(): "+ groupName + "对 象 组 的 坐标 未 调 
共鸣 学 

30 } 

31 

32 group.setPositionOoffset (cc.p(finalOffsetXx, finalOffsetY)); 

33 } 

3 


在 上 述 代 码 中 ， 第 3 行 到 第 5 行 获取 出 当前 主题 和 关卡 ， 然 后 根据 主题 和 关卡 创建 出 


cc.TMXTiledMap 节 点 。 

第 8 行 保存 了 瓦 片 地 图 的 地 图 大 小 ， 其 值 为 cc .size (13，7)。 

第 9% 行 到 第 10 行 设置 瓦 片 地 图 的 坐标 为 当前 场景 的 正中 心 。 

第 11 行 中 ， 我 把 瓦 片 地 图 隐藏 了 ， 因 为 我 只 是 需要 瓦 片 地 图 对 象 层 中 的 配置 数据 。 

另外 , 在 瓦 片 地 图 编辑 器 中 ,对 象 层 中 参考 的 原点 坐标 为 当前 地 图 的 左下 角 , 但 是 瓦 片 地 图 
被 添加 到 当前 场景 的 正中 心 之 后 ,就 会 产生 一 定 的 位 置 偏 移 。 第 13 行 到 第 32 行 就 是 计算 每 个 对 象 
层 位 置 的 偏 移 量 ， 最 终 把 位 置 的 偏 移 量 保存 在 对 应 的 group 中 ( 见 第 32 行 )。 

3. 怪物 生成 

调整 完 怪物 移动 的 路 径 标记 坐标 后 ， 便 可 以 创建 怪物 ， 实 现 怪 物 移动 了 。 

首先 ， 需 要 把 瓦 片 地 图 中 roaq 对 象 层 里 面 所 有 的 标记 获取 出 来 ， 然 后 加 上 roaq 道 路 对 象 层 
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的 坐标 偏 移 量 ， 最 后 将 坐标 点 保存 在 roadPointArray 数 组 中 ， 代码 如 下 : 


1 // 加 载 [ 路 径 坐 标 ] 
2 loadRoadPointArray : function(){ 
3 this.roadPointArray = []; 
4 var roadGroup = this.tiledMap.getObjectGroup ("road"); 
5 Var roads = roadGroup.getObjects(); 
6 for (var i = 0; i < roads.length; i++) { 
7 this.roadPointArray.push(cc.p(roads[i] .x + roadGroup.getPositionOffset(). 
x , roads[i].y + roadGroup.getPositionOffset().y)); 
8 } 
9 让 
接着 ,再 编写 一 个 loadNextGroupMonster () 函数 。 每 次 调用 这 个 函数 时 ， 都 会 创建 出 当 
前 组 的 怪物 ， 其 代码 如 下 : 
1 // 加 载 [ 下 一 组 怪物 ] 
2 loadNextGroupMonster : function()f{ 
二 if (GameManager.getGroup() > GameManager.getMaxGroup()) { 
4 cc.log ("GPMainLayer.loadNextGroupMonster() : 怪物 添加 完毕 "); 
5 return; 
6 } 
GameManager.currMonsterDataPool = GameManager.popNextMonsterGroupData(); 
8 GameManager.currMonsterPool [GameManager.getGroup() - 1] = []; 
9 
于 名 this.currGroupCreatedMonsterCount = 0; 
于] // 怪物 总 数 统计 
12 this.currGroupCreatedMonsterSum = GameManager.getCurrGroupMonsterSum(); 
13 
14 var groupDelay = cc.delayTime (GameManager.getGroupInterval ()); 
15 // 延迟 时 间 
16 Var enemyDelay = cc.delayTime (GameManager.getEnemyInterval ()); 
17 Var callback = cc.callFunc (this.createMonster.bind(this)); 
18 Var createMonsterAction = cc.sequence (enemyDelay.clone(), callback) .repeat 
(this.currGroupCreatedMonsterSum); 
19 var finalAction = cc.sequence(groupDelay, createMonsterAction); 
20 this.runAction(finalAction); 
人 2 


在 上 述 代 码 中 ， 粤 
DataPool 数 组 中 。 


7 行 弹出 了 一 组 怪物 数据 ， 并 保存 在 GameManager.currMonster- 


er 


du 


第 8 行 重 置 了 当前 组 的 怪物 节点 池 。 


第 9 行 重 置 了 当前 组 已 经 创建 的 怪物 数量 。 


第 12 行 获取 当前 组 总 共有 和 多少 只 怪物 (具体 代码 可 见 GameManager.getCurrGroup- 
MonsterSum() 函数 ), 并 将 结果 赋值 给 currGroupCreatedMonsterSum 参 数 , 这 个 结果 作用 于 


第 18 行 ， 用 来 重复 执行 多 少 次 创建 怪物 的 复合 函数 。 


第 17 行 创建 了 一 个 函数 动作 。createMonster() 函数 每 次 会 从 GameManager .curr- 
MonsterDataPool 数 组 中 获取 下 一 个 怪物 数据 ， 然 后 根据 这 个 数据 创建 出 怪物 ， 其 代码 如 下 : 
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// 创建 [怪物 ] 

createMonster : function(){ 
var data = GameManager.currMonsterDataPool[0]; 
// 创建 怪物 数量 +1 
this.currGroupCreatedMonsterCount++; 


var monsterData = { 
road : this.roadPointArray, 
speed : data.speed, 
index : data.index 


‘OO ODPp 


> 


Var namePrefix = data.name.substring(0, data.name.length - 1); 

var fileNamePrefix = "Theme" + GameManager.getThemeID() + "/Monster/" + 
nameprefix; 

5 Var fileName = "#" + fileNamePrefix + "1.png"; 

16 Var node = new Monster(fileName, monsterData, fileNamePprefix); 

7 this.addChild(node, this.ZOrderEnum.MONSTER); 

18 GameManager.currMonsterPool[GameManager.getGroup() - 1] .push (node); 

19 node.setPosition(this.roadPointArray{[0]); 

20 node.run(); 


22 // 删除 第 一 个 数据 
2 GameManager.currMonsterDataPool.splice(0, 1); 


在 上 述 代码 中 ,第 13 行 剪 切 掉 了 和 名字 的 最 后 一 个 字符 。 例 如 ，L21 经 过 剪 切 之 后 ， 得 到 L2 前 
级 ; 又 比如 SF21 经 过 剪 切 之 后 ， 得 到 SF2 前 级 。 获 取 这 个 前 绥 的 目的 是 将 此 前 缀 传递 给 怪物 类 
( Monster ), 然后 在 怪物 类 内 部 , 便 可 以 根据 此 前 绥 拼 接 出 对 应 的 帧 动画 名 字 ， 因 为 每 一 个 怪物 
都 有 3 帧 ， 例 如 胖 怪 的 帧 图 片 如 图 17-18 所 示 。 


b—4 bd 一 4 
Ar = a 
SF21.png SF22.png SF23.png 


图 17-18 ” 胖 怪 的 序列 帧 图 片 

第 16 行 根据 对 应 的 主题 和 关卡 ， 创 建 出 对 应 的 怪物 ， 并 把 怪物 数据 monsterData 传 到 
Monster 构 造 限 数 中 。 

第 18 行 将 创建 出 来 的 怪物 保存 在 cameManager 。 currMonsterPool 数 组 中 o 

第 23 行 删除 了 人 GameManager .currMonsterDataPool 数 组 的 第 一 个 对 象 。 

注意 第 20 行 ， 这 里 执行 了 node .run() 图 数 ， 调 用 此 函数 后 ， 怪 物 便 可 以 一 边 播放 着 动画 ， 
一 边 跑 起 来 。 

显然 ，run 函 数 被 定义 在 Monster 类 (位 于 src/Scene/GamePlay/Node/Monster/Monster.js 文 件 
里 ) 中 ， 接 下 来 就 来 看 看 Monster 类 是 如 何 实现 的 。 
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首先 ， 我 给 Monster 类 定义 了 几 个 属性 ， 代 码 如 下 : 


1 var Monster = cc.Sprite.extendl(t{ 

2 road 1 yp // 移动 路 径 

3 data // 数据 

4 speed £105 // 速度 

5 index ;Oy // 索引 

6 roadIndex Ds // 当前 移动 路 径 的 前 级 
fileNamePrefix  : "", // 帧 前 级 

8 ctor : function(fileName, data, fileNamePrefix){ 
9 this. super (fileName); 

10 i 

王 玉 


然后 ， 我 又 给 Monster 编 写 了 一 个 loadProperty (Gata， fileNamePrefix) 函数 ， 用 来 
配置 初始 属性 ， 代码 如 下 : 
// 加 载 [ 属 性 配置 ] 


于 
2 loadProperty : function(dqata，fileNamePrefix){ 

3 cc.assert (data.speed, "Monster.loadProperty(): Re 
4 cc.assert (data.road, "Monster.loadProperty(): 移动 路 径 不 能 为 空 | " 
5 ( 
6 ( 
7 
8 


cc.assert (data.index >= 0，"Monster.loadProperty(): 索引 不 能 1 
cc.assert (fileNameprefix, "Monster.loadProperty(): 文件 名 前 绥 不 能 为 空 | "); 


玫 


this.data = data; 


9 this.speed = data.speed; 

10 this.road = data.road; 

外 人 this.index = data.index; 

1]2 this.fileNamePrefix = fileNamePprefix; 
3 于 


在 loadProperty 限 数 中 ,添加 了 几 个 断言 ， 用 来 保证 属性 被 正确 赋值 。 有 了 速度 、 移 动 路 
径 等 属性 后 , 怪物 便 可 以 运行 noveTo 动 作 来 实现 跑 到 终点 。 接 着 , 给 Monster 添 加 runNextRoad 
函数 ， 用 来 让 怪物 跑 到 下 一 个 标记 点 上 ， 直 到 跑 到 终点 ， 其 代码 如 下 : 


1 // 跑 到 下 一 个 标记 点 上 

2 runNextRoad : function(){ 

3 // 转 方向 

4 if (this.road[this.roadIndex] .x <= this.road[this.roadIndex + 1] .x) { 
S this.setFlippedx (false); 

6 }elsel{ 

7 this.setFlippedxX (true); 

8 } 

9 var distance = cc.pDistance(this.road[this.roadIndex], this.roadi[lthis. 
roadIndex + 1]); 


10 var time = distance / this.speed; 

11 Var moveTo = cc.moveTo(time, this.road[this.roadIndex + 1]); 
元 Var callback = cc.callFunc (function(){ 

下马 if (this.roadIndex < this.road.length - 1) { 

14 this.runNextRoad(); 

1 }elsel{ 


16 // 吃 到 莫 下 事件 抛 出 
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Var event = new cc.EventCcustom(7JFE.EventName .GP_MONSTER_EAT_ CRARROT ) : 


18 event .SetUSerData({ 

19 target : this 

20 bs 

2 cc.eventManager.dispatchEvent (event); 
22 » 

2.3 }.bind (this)); 

24 var seq = cc.sequence (moveTo, callback); 

25 this.runAction (seq); 

26 this.roadIndex++; 

7 


第 3 行 到 第 8 行 里 面 有 个 小 技巧 ,就 是 当 你 在 瓦 片 地 图 编辑 器 中 标记 移动 路 径 的 时 候 , 若 希 望 
怪物 的 脸 转 个 方向 ， 便 可 把 X 轴 坐标 向 左 或 向 右 偏 移 1 个 像素 。 在 程序 中 ， 对 比 下 当前 怪物 所 在 
的 路 径 点 和 下 一 个 路 径 点 的 X 轴 坐标 , 若 下 一 个 标记 点 的 X 轴 坐标 小 于 当前 标记 点 的 X 轴 坐标 , 那 
么 调用 this.setFlippedqX(true) 国 数 ， 即 可 实现 了 怪物 脸 的 朝 疝 。 

另外 ， 值 得 注意 的 是 第 13 行 ， 它 判断 是 否 移动 到 最 后 一 个 标记 点 ， 若 不 是 ， 则 执行 第 14 行 ， 
继续 调用 runNextRoad() 函数 让 怪物 跑 到 下 一 个 标记 点 上 ， 直 到 怪物 到 达 终 点 之 后 ， 抛 出 怪物 
吃 到 葛 小 的 事件 ,并 把 当前 怪物 对 象 作为 事件 携带 数据 ,一 并 抛 出 ,然后 接收 事件 的 层 便 可 以 通 
过 事件 携带 数据 将 怪物 移 除 。 毫 无 疑问 ， 这 一 事件 将 在 cpPMainLayer 中 被 注册 监听 。 

此 时 ， 再 运行 下 项 目 ， 可 以 看 到 结果 如 图 17-19 所 示 。 
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图 17-19 ”创建 出 第 一 组 怪物 

4. 开始 路 标 以 及 萝 小 的 开发 

在 怪物 到 达 终 点 的 时 候 , 会 抛 出 一 个 吃 到 葛 仆 的 事件 , 但 是 此 时 我 们 还 没有 将 萝卜 和 开始 路 
标 添 加 进来 ， 接 下 来 就 来 完成 开始 路 标 以 及 莹 卜 的 开发 。 

实际 上 上， 开始 路 标 和 莹 卜 的 坐标 位 置 就 是 瓦 片 地 图 road 对 象 层 中 第 一 个 对 象 和 最 后 一 个 对 
象 的 坐标 ,但 是 我 并 不 打算 利用 这 两 个 值 , 因为 这 会 加 大 移动 路 径 和 葛 小 的 耦合 度 。 这 里 我 在 Tiled 
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13 


Map Editor 编 辑 器 中 新 建 了 一 个 start_enq 对 象 层 ， 然 后 在 道路 的 起 点 和 终点 标记 出 了 对 应 
置 ， 这 一 步 的 操作 和 之 前 标记 怪物 的 移动 路 径 是 一 样 的 。 


的 位 


给 瓦 片 地 图 添加 start_end 对 象 层 后 , 也 需要 在 GPMainLayer.1loadTiledMap () 函数 中 设 
置 start_end 对 象 层 的 坐标 偏 移 量 ， 相 关 代码 见 下 面 的 第 7 行 : 

1 // 加 载 [ 瓦 片 地 图 ， 主 要 是 一 些 关 目 信 息 配 置 ] 

2 loadTiledMap : function(){ 

3 A te ed 

4 for (var i = 0; i < groups.length; i++) { 

5 7 

6 if (groupName == "road" 

|| groupName == "start end") { 

8 finalOoffsetxXx = offsetX + this.tileSize.width / 2; 

9 finalOoffsetY = offsetyY + this.tileSize.height / 2; 

10 }elsel{ 

TL cc.warn ("GPMainLayer.loadTiledMap(): " + groupName + "对 象 组 的 坐标 未 调 

整 ") ; 

2 于 

13 group.setPositionOffset (cc.p(finalOoffsetx, finalOoffsetY)); 

14 } 

工 3 示 

然后 再 给 GPMainLayer 编 写 1oadstartAndEnd() 函数 , 用 来 加 载 开始 路 标 和 终点 葛 卜 。 在 
loadqstartaAndqEnad () 函数 中 ， 又 调用 了 1loaqstartFlag() 困 数 ， 用 来 加 载 起 始 路 标 ; 调用 了 
loagdEndFlag () 函数 加 载 终点 的 葛 卜 。 最 后 ， 调 用 loadqcarrotHp () 函数 来 加 载 葛 让 的 血 量 等 


相关 节点 ， 这 些 函 数 的 实现 详 见 随 书 源码 。 
现在 ， 便 可 以 在 GPMainLayer 中 注册 怪物 吃 到 萝卜 的 事件 监听 了 ， 代 码 如 下 : 


1 // 注册 [事件 监听 ] 

2 registerEvent : function()f{ 

3 // [事件 监听 ] 怪物 吃 到 葛 下 

4 Var onMonsterEatCarrotListener = cc.EventListener.createl(t{ 
5 event : cc.EventListener.CUSTOM, 

6 target : this, 

了 eventName : jf.EventName .GP MONSTER EAT CARROT, 

8 callback : this.onMonsterEatCarrot 

9 }) > 


cc.eventManager.addListener (onMonsterEatCarrotListener, this); 


// [事件 监听 ] 蔓 目 血 量 更 新 


Var onUpdateCarrotBloodListener = cc.EventListener.createl(t{ 


event : cc.EventListener.CUSTOM, 

target : this, 

eventName : jf.EventName .GP_ UPDATE CARROT BLOOD, 
callback : this.onUpdateCarrotBlood 


}); 
cc.eventManager.addListener (onUpdateCarrotBloodListener, this); 


ID ID | ae | jr bs 寺 
OD 00 OV OL 
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可 以 看 到 ， 上 面 的 代码 注册 了 两 个 事件 监听 , 分 别 是 怪物 吃 到 葛 卜 和 葛 卜 血 量 更 新 , 它们 的 


hl 


‘OOOO 人 WOPO 


在 上 述 代 码 中 ，onUpdateCarrotBlood (event) 函数 的 内 部 实现 比较 简单 ， 主 要 就 是 更 新 


A 


此 件 回 调 函 数 分 别 是 onMonsterEatCarrot (event) 和 onUpdateCarrotBlood (event) 。 这 两 


个 事件 回调 函数 的 逻辑 代码 如 下 : 


[事件 ] 怪物 吃 到 莫 下 


onMonsterEatCarrot : function(event){ 


} 
// 


Var self = event.getCurrentTarget (); 

// 募 下 扣 血 

GameManager.subtractCarrotBlood(); 

// 删除 敌人 

Var monster = event .getUSserData() .target; 

self.removeMonster (monster); 

// 进入 下 一 组 

if (self.isNeedLoadNextGroup()) { 
self.loadNextGroupMonster (); 


[事件 ] 更 新 萝卜 血 量 


onUpdateCarrotBlood : function(event)t{ 


} 


Var self = event.getCurrentTarget (); 
var blood = event .getUserData() .blood; 
self.carrotHpText .setString (blood + "™"); 


一 下 葛 下 血 量 的 文本 显示 。 
而 onMonsterEatCarrot (event) 图 数 就 显得 复杂 一 些 。 首 先 ， 需 要 对 昔 卜 进行 扣 掉 一 滴 
血 的 操作 ,这 由 GameManager .subtractCarrotBlood() 函数 来 实现 ， 该 函数 内 部 的 实现 代码 


如 下 : 


‘O00 和 OURODP 


R PPPPPPPI 
do 


// 


蔓 下 每 次 扣 一 滴 血 


subtractCarrotBlood : function()f{ 


一 


this.carrotBlood = this.carrotBlood <= 0 ? 0 : this.carrotBlood - 1; 
// 抛 出 血 量 更 新 事件 
Var event = new cc.EventCcustom(7FE.EventName .GP_UPDATE_CARROT BLOOD ) ; 
event .SetUSerData({ 

blood : this.carrotBlood 


J 
cc.eventManager.dispatchEvent (event); 


// 抛 出 游戏 结束 事件 
if (this.carrotBlood == 0) { 
var gameOverEvent = new cc.EventCustom(jf.EventName.GP GAME OVER); 
gameOverEvent .setUserDatal{ 
isWin : false 
} 
cc.eventManager.dispatchEvent (gameOverEvent); 


通过 三 目 运算 保证 了 蔓 仆 的 血 量 永 远 不 会 小 于 0， 然 后 每 一 次 调用 GameManager . 
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subtractCarrotBlood() 函数 ,都 会 抛 出 一 个 血 量 更 新 事件 , 这 一 事件 监听 注册 在 我 刚刚 提 到 
的 GPMainLayer.registerEvent () 函数 中 。 此 外 ， 如 果 葛 下 的 血 量 等 于 0 ( 见 第 12 行 )， 则 抛 
出 游戏 结束 事件 ， 事 件 携带 对 象 中 标记 了 当前 游戏 为 输 了 的 状态 ( 见 第 15 行 )。 最后， 第 17 行 分 
发 了 游戏 结束 的 事件 。 

现在 ， 回 到 onMonsterEatcarrot () 图 数 中 ， 其 中 第 7 行 获取 出 了 当前 怪物 对 象 。 第 8 行 通 
过 removeMonster (monster) 图 数 将 此 怪物 移 除 掉 ， 该 本 数 会 去 遍历 GameManager. 
currMonsterPool 数 组 ， 找 到 对 象 后 ， 再 通过 removeMonsterByIndex (i，j) 子 数 将 怪物 完 
全 移 除 掉 。removeMonster () 和 removeMonsterByIndex (i，j) 捕 数 的 代码 如 下 : 


hl 


1 // 移 除 [ 怪 物 ] 

2 removeMonster : function(obj){ 

Var monster = null; 

4 for (var i = 0; i < GameManager.currMonsterPool.length; i++) { 
5 for (var j = 0; j < GameManager.currMonsterPool[i].length; j++) { 
6 monster = GameManager.currMonsterPool[i][j]; 

7 if (monster == obj) { 

8 this.removeMonsterByIndex(i, j); 

9 } 

10 } 

11 } 

站 天 

13 // 根据 数组 下 标 删 除 怪物 

14 removeMonsterByIndex : function(i, j)tf{ 

ES this.removeChild(GameManager.currMonsterPool[i][j]); 

16 GameManager.currMonsterPool[i].splice(j, 1); 

LL 


在 onMonsterEatCcarrot () 函数 中 做 的 最 后 一 件 事 情 就 是 通过 isNeedqLoadNextGroup () 
函数 判断 是 否 需 要 加 载 下 一 波 怪物 。isNeedqLoadNextGroup () 函数 用 于 判断 


GameManager .curtrMonsterPool 数 组 中 是 否 还 有 怪物 存在 ， 并 且 当 前 组 已 经 创建 的 怪物 
数量 ( currGroupCreatedMonsterCount ) 是 否 等 于 当前 组 怪物 的 总 数量 ( CUrrGroup- 


CreatedMonsterSum 如 果 条 件 成 立 ， 则 加 载 下 一 组 怪物 ， 代码 如 下 : 
// 判断 是 否 需要 进入 到 下 一 组 


isNeedLoadNextGroup : function()f{ 
var isNeed = false; 
if (GameManager.currMonsterPool[GameManager.group - 1].length == 0 
&& this.currGroupCreatedMonsterCount == this.currGroupCreated-— 
MonsterSum){ 
isNeed = true; 


DRODP 


} 


return isNeed; 


\D oO 


} 
此 时 ,再 运行 项 目 ， 等 怪物 吃 到 葛 卜 ， 可 以 看 到 的 效果 如 图 17-20 所 示 。 
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1 / 6 波 怪物 


图 17-20 ”怪物 吃 到 葛 下 


5. 障碍 物 加 载 

前 面 提 到 过 ,关卡 中 的 障碍 物 也 是 使 用 Tiled Map Editor 编 辑 器 配置 的 ， 现 在 再 给 第 一 关 的 瓦 
片 地 图 添加 4 个 对 象 屋 ， 并 将 其 分 别 命名 为 smal1 (最 小 占 1 格 的 障碍 物 )、1ittle (小 障碍 物 ， 
占 左右 两 格 的 障碍 物 )、pig ( 占 4 格 的 大 障碍 物 ) 和 invaliq (不 能 点 击 区 域 )。 然 后 在 对 应 的 
图 层 中 搬入 和 矩形, 用 来 标记 位 置 。 其 中 ,small 和 invalid 对 象 层 中 标记 的 位 置 为 格子 的 左下 角 ， 
1ittle 对 和 象 层 中 障碍 物 标 记 的 位 置 为 第 二 个 障碍 物 所 在 格子 的 左下 角 ,big 对 象 层 中 标记 的 位 置 
为 障碍 物 的 正中 心 所 在 格子 的 左下 角 ， 如 图 17-21 所 示 。 


‘eo.e T 
ED 旋 四 | 委 训 有 , 只 ia 了 轴 友 写 上 、 中 有 同人 刀 轩 | 负 


T Levell.tmx 


13, 1 当前 层 : little 0% 加 
图 17-21 ”障碍 物 标记 点 
但 是 ， 此 时 仅仅 只 是 完成 了 各 种 障碍 物 位 置 的 标记 ， 对 于 当前 位 置 是 什么 类 型 的 障碍 物 , 我 
们 还 没有 标记 , 那么 如 何 标记 当前 位 置 是 什么 类 型 的 障碍 物 呢 ? 实际 上 , 这 可 以 直接 设 定 对 象 层 
中 对 象 的 名 字 ， 设 定 的 名 称 也 是 对 应 障碍 物 的 图 片 名 称 。 图 17-22 演 示 的 是 smal1 对 象 层 中 的 标 
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记 ， 其 他 对 象 层 中 障碍 物 的 类 型 标记 与 其 一 致 。 


e809 和 和 
名 称 类 型 
* 回 贸 iitle 
v 外 small 

国 S1 

图 S1 

图 S1 

回 S1 

国 S2 

图 S2 

mc 
四 全 灸 上 3a 


迷你 地 图 图 层 


图 17-22 ”障碍 物 类 型 标记 


完成 之 后 ， 回 到 代码 中 。 在 GPMainLayer .1oadTiledMap () 函数 中 设置 每 个 对 象 层 的 坐标 
扁 移 量 ， 代 码 如 下 : 


1 // 加 载 瓦 片 地 图 ， 主 要 是 一 些 关卡 信息 配置 

2 loadTiledMap : function(){ 

3 de 

4 for (var i = 0; i < groups.length; i++) { 

5 group = groups[i]; 

6 groupName = group.getGroupName (); 

8 // 大 障碍 物 [ 占 4 格 ] 

9 if (groupName == "big") { 

10 finalOffsetX = offsetx; 

和 并 finalOoffsetY = offsetyY; 

ee } 

13 // 中 等 障碍 物 [ 占 用 左右 2 格 ] 

14 else if (groupName == "little")f{ 

.3 finalOffsetX = offsetx; 

16 finalOoffsetY = offsetyY + this.tileSize.height / 2; 

a }else if (groupName == "small" 

18 | 1 groupName == "road" 

19 | | groupName == "start_end" 

20 || groupName == "invalid") { 

2 finalOoffsetxXx = offsetX + this.tileSize.width / 2; 

22 finalOoffsetY = offsetY + this.tileSize.height / 2; 

23 Jelsel 

24 cc.warn ("GPMainLayer.loadTiledMap(): " + groupName + "对 象 组 的 坐标 未 调 
整 ") ; 

2 } 

26 group.setPositionOffset (cc.p(finalOoffsetx, finalOoffsetY)); 

2 > 

28 } 


可 以 看 到 , 不 同 对 象 层 设置 的 坐标 偏 移 量 不 同 , 但 是 实际 上 它们 都 在 做 同一 件 事情 一 一 保证 
对 象 层 中 的 对 象 坐标 加 上 对 象 层 的 偏 移 量 后 所 得 到 的 坐标 是 当前 障碍 物 的 正确 坐标 。 


当 所 有 对 象 层 坐 标 偏 移 量 设置 完成 之 后 , 便 可 以 开始 加 载 障碍 物 了 。 但 是 ,要 在 程序 中 把 这 


318 第 17 章 《保卫 葛 下 2》 实战 


些 障 得 物 创 建 在 对 应 的 位 置 ， 并 标记 出 当前 位 置 是 什么 障碍 物 ， 可 不 像 在 Tiled Map Editor 编 辑 带 
中 那么 简单 。 那 么 ， 应 该 怎么 做 呢 ? 

首先 ， 生 成 一 个 二 维 数组 tiledMapRectArray。 实 际 上 ， 它 是 瓦 片 地 图 中 瓦 片 格子 区 域 的 
“映射 ”， 保 存 地 图 中 每 个 格子 的 区 域 (cc .rect ) 信息 ， 如 图 17-23 所 示 。 


D800 IE SI nS 


图 17-23 ”障碍 物 类 型 标记 


然后 ， 还 需要 定义 一 个 二 维 数 组 tiledMapRectArrayMap， 这 个 数组 是 数组 tiledMap- 
RectArray 的 状态 标记 。 例如 区 域 数 组 tiledMapRectArray 中 第 5 行 第 2 列 有 一 个 小 障碍 物 ， 那 
么 只 要 设置 tiledMapRectArrayMap[4] [1] 为 一 个 约定 的 值 ， 例 如 2， 便 成 功 地 标记 了 区 域 中 
障碍 物 所 在 的 位 置 以 及 类 型 了 。 其 他 的 障碍 物 类 似 , 例如 你 可 以 把 占 2 格 的 障碍 物 标记 为 3， 占 用 
4 格 的 大 障碍 物 标记 为 4。 


理 清 了 逻辑 之 后 ， 来 看 一 下 代码 实现 。 显 然 ， 我 们 需要 先 配 置 区 域 数组 tiledMapRect- 
Array， 它 在 10adTileRect () 函数 中 被 赋值 ， 代 码 如 下 : 


1 // 加 载 [ 瓦 片 区 域 ] 

2 loadTileRect : function(){ 

3 Var mapSize = this.tiledMap.getMapSize(); 

4 var nextPosX = (cc.winSize.width - this.tiledMap.width) / 2 + this.tileSize. 
width / 2; 

5 var nextPosY = (cc.winSize.height - this.tiledMap.height) / 2 + this.tileSize. 
height / 2; 

6 for (var i = 0; i < mapSize.height; i++) { 

J this.tiledMapRectArray[i] = []; 

8 for (var ] = 0; j < mapSize.width; j++) { 

9 this.tiledMapRectArray[i][j] = cc.rect( 

10 nextPosxX - this.tileSize.width / 2， 

11 nextPosY - this.tileSize.height / 2, 

42 this.tileSize.width, 

13 this.tileSize.height); 

14 // 测试 节点 


二 8 Var node = new cc.Sprite(); 
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列 。 


16 this.addCchild(node, 100); 

17 node.setTextureRect (cc.rect (0, 0, this.tileSize.width - 3, this. 
tileSize.height - 3)); 

18 node.setPosition (nextPosXx, nextPosY); 

19 node.setColor(cc.color(255, 0, 255)); 

2:0 node.setOpacity(100); 

让 

22 nextPosX += this.tileSize.width; 

23 } 

24 nextPosX = (cc.winSize.width - this.tiledMap.width) / 2 + this.tileSize. 

width / 2; 

25 nextPosY += this.tileSize.height; 

26 } 

A: 


在 上 述 代码 中 ， 第 3 行 获 取 瓦 片 地 图 的 地 图 大 小 ， 其 值 为 cc .size (13，7)， 表 示 有 7 行 13 
然后 根据 这 个 大 小 做 了 一 次 2 层 for 循 环 ， 生 成 了 对 应 的 区 域 对 象 。 


第 14 行 到 第 20 行 为 区 域 测 试 代 码 ， 其 作用 只 是 把 tiledqMapRectaArtay 数 组 中 的 区 域 对 象 绘 


制 出 来 。 此 时 ， 再 运行 项 目 ， 便 可 以 看 到 效果 如 图 17-23 所 示 。 


值 了 ， 


当 保存 区 域 的 数组 iledMapRectaArray 赋 值 完成 之 后 ， 就 需要 初始 化 区 域 状态 数组 的 默认 


代码 如 下 : 
1 // 加 载 [ 瓦 片 地 图 区 域 映射 ] 
2 loadTiledMapRectArrayMap : function(){ 
3 Var i; 
4 var mapSize = this.tiledMap.getMapSize(); 
5 for (i = 0; i < mapSize.height; i++) { 
6 this.tiledMapRectArrayMap[i] = []; 
4 for (var j = 0; j < mapSize.width; j++) { 
8 this.tiledMapRectArrayMap[i][j] = this.tiledMapRectMapEnemu .NONE; 
9 } 
10 } 
11 让 


在 上 述 代 码 中 ， 第 8 行 标 记 了 tiledMapRectArrayMap 数 组 中 所 有 对 象 的 值 都 为 this. 


tiledMapRectMapEnemu .NONE, 表示 此 位 置 没有 任何 物体 。 实际 上 ,tiledMapRectMapEnemu 


是 一 


塔 等 ， 


个 模拟 枚 举 的 对 象 , 每 个 属性 用 来 表示 不 同 的 物体 ,例如 道路 、 小 障碍 物 、 大 障碍 物 以 及 炮 


这 些 属性 在 GCPMainLayer .1oadProperty () 函数 中 被 初始 化 ， 代 码 如 下 : 
// 加 载 [ 属 性 ] 
loadProperty : function()f{ 
Hr ed 
this.tiledMapRectMapEnemu .NONE 0 // 无 
this.tiledMapRectMapEnemu .ROAD Cy // 道路 


; // 小 障碍 物 [ 占 1 格 ] 
// 中 障碍 物 [ 占 2 格 ] 
// 大 障碍 物 [ 占 4 格 ] 
;> // 无 效 区域 

// 塔 


this.tiledMapRectMapEnemu .LITTLE = 

this.tiledMapRectMapEnemu .BIG 二 

this.tiledMapRectMapEnemu .INVALID 
0 this.tiledMapRectMapEnemu .TOWER = 
二 


ON 已 口 


于 
2 
3 
4 
6 this.tiledMapRectMapEnemu .SMALL = 
8 
9 
1 
1 
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有 了 区 域 数 组 ( tiledMapRectArray )、 区 域 上 物体 的 状态 标记 数组 ( tiledMapRect- 
ArrayMap ) 以 及 状态 表示 对 象 ( tiledMapRectMapEnemu ) 之 后 ， 还 需要 一 个 函数 ， 这 个 函数 
负责 接收 一 个 点 坐标 ， 然 后 返回 指定 坐标 在 tiledMapRectArray 中 的 相关 信息 ， 例 如 当前 坐标 
是 否 在 tiledMapRectArray 表 示 的 区 域 中 、 是 在 区 域 中 的 第 几 行 第 几 列 以 及 对 应 区 域 的 坐标 是 
多 少 。 我 将 这 个 函数 命名 为 get InfoFromMapByPos (x，y) ， 其 代码 如 下 : 


// 根据 坐标 获取 在 地 图 格子 区 域 中 的 信息 
getInfoFromMapByPos : function(x, y)t{ 
cc.assert (y !== undefined, "GPMainLayer.getInfoFromMapByPos():Y 坐 标 不 能 为 空 ! ") ; 
var isInMap = false; // 是 否 在 地 图 中 
Var index = {x : -1，Yy : -1 }; 
var rect = null; 
for (var i = 0; i < this.tiledMapRectArray.length; i++) { 
for (var j = 0; j < this.tiledMapRectArray[il].length; j++) { 
rect = this.tiledMapRectArray[i][j]; 
if (cc.rectContainsPoint (rect, cc.p(x, y))) { 
index.row = i; 


‘O00 和 OURODP 


index.cel = j; 
index.x = rect.x; 
index.y = rect.y; 
isInMap = true; 


} 


return { 
isInMap : isInMap, 
row : index.row,， // 行 
cel : index.cel， // 列 
x : index.x, 
y : index.y 


DOODODODOoO 和 PPPPPPPPPPpI 
NU 和 ONDDOCOooo、~、OU 和 ww OPO 


3 
27 } 


在 上 述 代码 中 ， 第 20 行 到 第 26 行 返回 了 指定 坐标 在 tiledMapRectArray 的 信息 ,例如 行 和 
列 。 有 了 行 和 列 之 后 ,， 便 可 以 在 加 载 障碍 物 的 同时 ， 也 在 tiledMapRectArrayMap 中 对 应 的 位 
置 标记 出 当前 障碍 物 的 类 型 。 例 如 ， 加 载 最 小 障碍 物 的 代码 如 下 : 


// 加 载 [最 小 的 障碍 物 ] 
loadSmallObstacle : function(){ 
var smallGroup = this.tiledMap.getObjectGroup ("small"); 
var smalls = smallGroup.getObjects(); 
var node = null; 
var info = null; 
for (var i = 0; i < smalls.length; i++) { 
node = new cc.Sprite("res/GamePlay/Object/Theme" + 
GameManager.getThemeID() + "/Object/" + smalls[il].name +".png"); 
9 this.addChild (node); 
10 node.x = smalls[i].x + smallGroup.getPositionOffset().x; 
11 node.y = smalls[i].y + smallGroup.getPositionOffset().y:; 


1 
2 
3 
4 
5 
6 
多 
8 
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13 info = this.getInfoFromMapByPos (node.x, node.y); 

14 this.tiledMapRectArrayMap[info.row] [info.cel] = this.tiledMapRectMap 
Enemu . SMALL; 

15 } 

下 6 上 


在 上 述 代码 中 ， 第 8 行 获取 对 象 层 中 对 象 的 名 字 ， 接 着 根据 此 名 字 ， 并 结合 当前 主题 在 资源 
中 找到 对 应 的 障碍 物 图 片 ， 然 后 创建 出 精灵 节点 。 
第 10 行 和 第 11 行 分 别 设置 了 障碍 物 精灵 节点 的 X 坐 标 和 Y 坐 标 。 注 意 ， 它 们 都 加 上 了 对 象 层 
的 坐标 偏 移 量 ， 这 样 保证 了 障碍 物 位 置 没 有 发 生 错 乱 。 
第 13 行 调用 了 getInfoFromMapByPos (x，y) 国 数 ， 因 为 我 们 需要 知道 当前 障碍 物 的 位 置 
是 在 tiledqMapRectaArrayMap 数 组 中 的 第 几 行 第 几 列 。 

后 ,在 第 14 行 中 ,对 tiledMapRectArrayMap[info.row] [info.cel] 进 行 赋值 ， 表 示 

tiledMapRectArrayMap [info.row] [info.cell] 所 保存 的 障碍 物 状 态 为 最 小 障碍 物 。 

除了 小 障碍 物 外 ， 其余 障碍 物 的 加 载 方式 都 差不多 ， 有 区 别 的 就 是 区 域 状态 标记 。 以 大 障碍 
物 为 例 ， 它 占用 4 个 格子 。 假 设 get InfoFromMapByPos (x，Y) 函数 返回 的 行 和 列 对 应 图 17-24 
中 0 的 位 置 ， 那 么 我 们 应 该 还 0 汪 力 天 辜 认 曙 代码 如 下 : 


1 // 加 载 [大 障碍 物 ] 

2 loadBigObstacle : function(){ 

3 A A 

4 for (var i = 0; i < objs.length; i++) { 

5 Vy 

6 info = this.getInfoFromMapByPos (node.x, node.y); 

7 this.tiledMapRectArrayMap[info.row] [info.cel] = this.tiledMapRect 
MapEnemu .BIG; 

8 this.tiledMapRectArrayMap[info.row] [info.cel - 1] = this.tiledMapRect 
MapEnemu .BIG; 

9 this.tiledMapRectArrayMap[info.row - 1] [info.cel] = this.tiledMapRectMap 
Enemu .BIG; 

10 this.tiledMapRectArrayMap[info.row - 1] [info.cel - 1] = this.tiledMapRect 
MapEnemu .BIG; 

11 } 


图 17-24 ”大 障碍 物 占用 格子 的 情况 
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其 他 障碍 物 以 及 无 效 区 域 的 标记 与 此 类 似 , 详 见 项 目 源码 。 此 外 , 还 有 一 个 移动 路 径 的 标记 ， 
它 的 实现 思路 如 下 。 

首先 ， 判 断 当前 路 标点 和 下 一 个 路 标点 的 Y 值 是 否 相 等 ， 如 果 相 等 ， 则 表示 当前 段 移 动 路 径 
为 水 平移 动 , 然后 再 比较 X 坐 标的 大 小 , 如 果 下 一 个 路 标点 的 X 坐 标 大 于 当前 路 标点 的 X 坐 标 ， 则 
表示 水 平 向 右 运 动 ， 否 则 表示 水 平 向 左 运动 (Y 轴 方向 上 同 理 )。 

获取 出 移动 方向 之 后 , 再 计算 出 当前 路 标 和 下 一 个 路 标的 距离 除 以 70 的 结果 ( 格子 的 大 小 )， 
这 便 是 当前 方向 上 共有 的 格子 数量 ， 设 为 of fsetCount。 

最 后 ， 通 过 一 个 循环 次 数 为 offsetcount 的 for 循 环 ， 把 当前 方向 上 所 有 的 格子 都 标记 为 
tiledqMapRectMapEnemu.ROAD， 具 体 代 码 见 GPMainLayer .loadRoadMap () 函数 。 


此 时 ， 再 运行 一 下 项 目 ， 可 以 看 到 的 效果 如 图 17-25 所 示 。 
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图 17-25 ”障碍 物 加 载 


6. 创建 炮塔 

创建 炮塔 ， 需要 给 GpPMainLayer 注 册 一 个 TOUCH_ONE_BY_ONE 触摸 事件 ， 然 后 在 
onTouchEnded (touch，event ) 函数 中 进行 逻辑 处 理 ， 该 函数 的 代码 如 下 : 

1 onTouchEnded : function (touch, event) { 

2 Var self = event.getCurrentTarget (); 

3 var info = self.getInfoFromMapByPos (touch.getLocation() .x, touch. 


getLocation().y); 


4 // 没有 触摸 到 地 图 区 域内 

5 if (!info.isInMap) { 

6 self.loadTouchWarning (touch.getLocation() .x, touch.getLocation().y); 

7 }else { 

8 // 已 经 有 炮塔 或 者 障碍 物 

9 if (self.tiledMapRectArrayMap[info.row] [info.cel] != self. 
tiledMapRectMapEnemu .NONE) { 

10 self.loadTouchWarning (info.x + self.tileSize.width / 2, info.y + self. 


tileSize.height / 2); 
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11 }elsel{ 

12 // 当前 位 置 没有 炮塔 和 障碍 物 

13 if (self.towerPanel == null) { 
14 Var data = {}; 

5 data.row = info.row; 

16 data.cel = info.cel 

Ty. data.x = info.x; 

18 data.y = info.y; 

9 self.loadTowerPanel (data); 
20 }elsel{ 

2 self.removeChildl(self.towerPanel); 
22 self.towerPanel = null; 

23 } 

24 } 

25 } 

26 } 


在 上 述 代码 中 ， 第 3 行 获取 当前 触摸 点 在 til dMapR ctArray 数 组 所 保存 的 区 域 中 的 情况 ， 
返回 行 号 和 列 号 以 及 是 否 在 这 片区 域 中 ， 如 果 不 在 ( 见 第 5 行 )， 那 么 加 载 一 个 触摸 警告 的 精灵 ， 
这 个 精灵 运行 一 个 组 合 动 作 , 1 秒 之 后 自动 删除 , 具体 见 GPMainLayer.1loadTouchWarning (x， 
y) 函数 。 


如 果 当 前 触摸 的 位 置 在 tiledMapRectArray 数 组 所 保存 的 区 域 中 ， 则 根据 返回 的 行 号 和 列 
号 去 索引 区 域 状态 标记 数组 tiledMapRectArrayMap ， 如 果 索 引出 来 的 结果 不 是 
tiledMapRectMapEnemu.NONE ( 见 第 9 行 )， 则 表示 该 位 置 有 物体 或 者 是 无 效 触 摸 区 域 ， 此 时 
同样 需要 创建 触摸 警告 按钮 。 但 是 如 果 索 引出 来 的 结果 是 tiledMapRectMapEnemu .NONE， 则 
表示 当前 位 置 为 空 ， 说 明 可 以 创建 炮塔 ， 此 时 需要 构建 一 个 aata 数 据 ， 里 面 保存 炮塔 创建 成 功 
后 的 X 和 Y 坐 标 ， 以 及 对 应 的 行 号 和 列 号 ， 具体 见 第 14 行 到 第 19 行 。 
GPMainLayer.1loadTowerPanel () 函数 的 代码 如 下 : 


1 // 加 载 创 建 炮塔 的 面板 

2 loadTowerPanel : function(args){ 

3 // 接收 行 号 和 列 号 

4 Var node = new TowerPanel(args); 
6 

: 


this.addChild(node, this.ZOrderEnum.TOWER PANEL); 
this.towerPanel = node; 


} 
在 上 述 代 码 中 ,第 4 行 创建 出 了 创建 炮塔 要 用 的 面板 ， 如 图 17-26 所 示 。 
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图 17-26 ”创建 炮塔 面板 
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TowerPanel 继 承 自 精 灵 ， 然 后 在 这 个 精灵 之 上 又 添加 了 对 应 炮塔 的 图 标 精灵 。 图 标 精灵 需 
要 注册 一 个 触摸 事件 ， 在 触摸 事件 的 onTouchEnded (touch，event ) 函数 中 ， 会 抛 出 一 个 创建 


塔 的 事件 ， 相 关 代 码 如 下 : 


1 onTouchEnded: function (touch, event) { 

2 // target 指 向 对 应 炮塔 的 图 标 

3 Var target = event .getCurrentTarget (); 

4 // 创建 炮塔 事件 分 发 

yy Var createTowerEvent = new cc.EventCustom(jf.EventName .GP_ CREATE TOWER); 
6 createTowerEvent.setUserDatalt{ 

7 name : target .getName(), 

8 // target .getParent() 指 向 TowerPanel 

9 x : target.getParent () .getPositionx(), 

10 Yy : target.getParent () .getPositionY(), 

11 cel : target .getParent () .cel, 

12 row : target .getParent () .row 

13 人 

14 cc.eventManager.dispatchEvent (createTowerEvent); 
5 


可 以 看 到 , 第 5 行 创建 了 一 个 名 为 创建 炮塔 的 自 定义 事件 , 第 6 行 到 第 13 行 配置 了 事件 携带 的 


数据 对 象 ， 第 14 行 将 事件 抛 出 。 


毫 无 疑问 ， 创 建 炮塔 的 事件 应 该 在 scPMainLayer.registerEvent () 函数 中 被 注册 监听 ， 


代码 如 下 : 
1 // [事件 监听 ] 创建 炮塔 的 事件 
2 Var onCreateTowerListener = cc.EventListener.createl(t{ 
3 event : cc.EventListener.CUSTOM, 
4 target : this, 
5 eventName : jf.EventName .GP_ CREATE TOWER, 
6 callback : this.onCreateTower 
流下 让 训 
8 cc.eventManager.addListener (onCreateTowerListener, this); 


当 GPMainLayer 收 到 创建 炮塔 的 事件 之 后 ， 会 调用 oncreateTower (event ) 函数 ， 


获取 出 事件 对 象 event 所 携带 的 数据 ， 并 通过 此 数据 创建 出 对 应 的 炮塔 ,代码 如 下 : 
// [事件 ] 创建 炮塔 


1 

2 onCreateTower : function(event){ 

间 Var self = event.getCurrentTarget (); 
4 var data = event.getUserData(); 

5 // 根据 数据 创建 出 炮塔 

6 Var node = self.createTower (data); 

7 self.addChild (node); 

8 // 移 除 创建 炮塔 的 面板 


9 self.removeChildl(self.towerPanel); 
10 self.towerPanel = null; 
11 } 


该 函数 


在 上 述 代 码 中 ， 第 6 行 根据 aata 数 据 创 建 泡 塔 ， 第 7 行将 炮塔 添加 到 GPMainLayer 中 。 


createTower (data) 函数 的 代码 如 下 : 
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1 // 创建 炮塔 

2 createTower : function(data){ 

3 cc.assert (data.name, "GPMainLayer.createTower(): 名 字 无 效 | ") ; 

4 cc.assert (data.x, "GPMainLayer.createTower(): XxX 轴 坐标 无 效 | "); 

5 cc.assert (data.y, "GPMainLayer.createTower(): Y 轴 坐标 无 效 | ") ; 

6 

Var towerData = {}; 

8 towerData.name = data.name; 

9 towerData.x = data.x; 

10 towerData.y = data.y; 

二 下 

12 var node = null; 

13 Switch (data.name){ 

14 case "Bottle": 

1]:5 towerData.scope = 300; 

16 towerData.bulletSpeed = 20; 

ly node = new Bottle(towerData); 

18 break; 

19 default : 

20 cc.warn ("GPMainLayer.createTower() : 异常 ") ; 

21 break; 

22 } 

2.3 

24 if (node != null) { 

25 // 标记 当前 位 置 有 炮塔 

26 this.tiledMapRectArrayMap[data.row] [data.cel] = 
this.tiledMapRectMapEnemu .TOWER; 

Pe } 

28 return node; 

2.9. 


在 上 述 代 码 中 ,第 7 行 到 第 17 行 进一步 配置 了 炮塔 所 需要 的 数据 对 象 ， 从 而 创建 出 了 炮塔 。 


然后 第 26 行 将 当前 炮塔 所 在 的 区 域 位 置 标 记 为 LiledMapRectMapEnemu 
第 17 行 创建 出 了 瓶子 炮塔 对 象 ， 下 面 就 来 看 看 炮塔 类 应 该 如 何 设计 。 
7. 炮塔 的 设计 


.TOWER。 


从 《保卫 萝卜 2》 游 戏 中 可 以 知道 ， 每 一 个 瓶子 炮塔 都 会 朝 最 近 的 敌人 发 射 子 弹 。 经 过 分 析 
可 以 得 出 ,瓶子 炮塔 至 少 需 要 炮塔 的 视野 、 子 弹 的 速度 以 及 子弹 最 终 要 发 射 的 位 置 这 3 个 属性 ， 
除 此 之 外 , 子弹 最 终 的 位 置 又 取决 于 最 近 的 敌人 , 所 以 还 需要 一 个 属性 来 保存 对 中 的 敌人 。 再 者 ， 


炮塔 有 个 底座 , 底座 上 面 有 个 可 以 旋转 方向 的 炮 , 所 以 还 需要 定义 一 个 属 


性 来 指向 这 个 炮 。 但 是 ， 


为 了 让 炮塔 类 具有 良好 的 扩展 性 ， 我 编写 了 一 个 炮塔 的 父 类 TowerBase (位 于 src/Scene/ 
GamePlay/Node/Tower/TowerBase.js 文 件 中 )， 这 些 属 性 都 放 在 父 类 中 ， 代 码 如 下 : 


说 明 在 《保卫 萝卜 2》 中 有 多 种 炮塔 ， 这 里 我 不 打算 完成 所 有 炮塔 的 开发 ， 仅 选择 瓶子 炮塔 作 


为 示例 讲解 。 
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1 var TowerBase = cc.Sprite.extendl(t{ 

罗 scope 0 // 视野 

3 bulletSpeed : 10, // 子弹 速度 

4 bulletMoveTime : 0, // 子弹 移动 到 终点 所 需 的 时 间 
5 nearestEnemy : null, // 最 近 的 敌人 

6 fireTargetPos : cc.p(0, 0), // 子弹 最 终 的 位 置 

了 weapon : null, // 臣 器 

8 row : -1, // 行 

9 cel : -1, // 页 


ctor : function(fileName, data){ 
this. super (fileName, data); 


构造 函数 ctor ( 见 第 10 行 ) 中 的 参数 fileName 为 炮塔 底座 图 片 ,而 data 则 为 炮塔 的 配置 数 
据 。 显 然 ， 我 们 需要 一 个 函数 来 读 取 出 aata 中 所 有 的 数据 ， 其 代码 如 下 : 


// 加 载 [ 属 性 ] 

2 loadProperty : function(data)t{ 

3 cc.assert (data.scope > 0， "TowerBase.loadProperty() : scope 必 须 大 于 0 ! "); 
cc.assert (data.bulletSpeed > 0, "TowerBase.loadProperty() : bulletSpeed 
必须 大 于 01 "); 

5 this.scope = data.scope; 

6 this.bulletSpeed = data.bulletSpeed; 

7 this.bulletMoveTime = 100 / this.bulletSpeed; 

8 this.setPosition(data.x, data.y); 

9 this.setName (data.name); 

10°.} 


除 此 之 外 ; 我 还 给 TowerBase 添 加 了 一 个 indNearestEnemy () 函数 ,用 来 从 GameManager bp 
currMonsterPool 数 组 中 找 出 当前 炮塔 最 近 的 对 象 ， 并 返回 此 怪物 对 象 ， 其 代码 如 下 : 


1 // 找到 最 近 的 敌人 
2 findNearestMonster : function(){ 

3 Var monsterArray = GameManager.currMonsterPoo!l; 

4 var currMinDistant = this.scope; 

5 var nearestEnemy = null; 

6 var monster = null; 

7 var distance = 0; 

8 for (var i = 0; i < monsterArray.length; i++) { 

信 for (var j = 0; j < monsterArray[il].length; j++){ 

monster = monsterArray[i][j]; 

distance = cc.pDistance (this.getPosition(), monster.getPosition()); 
if (distance < currMinDistant) { 

currMinDistant = distance; 

nearestEnemy = monster; 


} 
this.nearestEnemy = nearestEnemy; 
return nearestEnemy; 


OP O OPO 


人 上 


起 
A 


彰 助 面向 对 象 编程 的 多 态 特 性 ， 给 TowerBase 添 加 loadweapon () 和 onFire() 天 数 ， 
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分 别 用 来 加 载 武 器 和 开火 ， 这 两 个 函数 需要 在 子 类 中 重 写 ， 其 代码 如 下 : 


1 // 加 载 [ 武 器 ] 

2 loadWeapon : function(){ 

3 cc.warn ("TowerBase.loadWeapon() : 请 重 写 此 方法 | "); 
4 1}, 

5 .YY 开火 

6 onFire : function()t{ 

7 cc.warn ("TowerBase.onFire() : 请 重 写 此 方法 | "); 

8 二 


炮塔 父 类 TowerBase 开 发 完成 后 ， 便 可 以 进一步 开发 出 瓶子 炮塔 Bottle 了 。 显 然 ，Bottle 
直接 继承 自 TowerBase。 此 外 ， 瓶 子 炮塔 每 隔 一 段 时 间 就 会 发 射 一 颗 子 弹 ， 所 以 ,在 Bottle 的 
构造 函数 里 ， 我 开启 了 一 个 调度 器 ， 代 码 如 下 : 


1 var Bottle = TowerBase.extendl(t{ 

2 ctor : function(data){ 

3 this._ super("#Bottle 3.png", data); 

4 // 0.5 秒 开火 一 次 

号 this.schedule(this.onRotateAndFire, 0.5); 
6 

Fé 


在 上 述 代 码 中 ， 第 5 行 开 启 了 一 个 调度 需 ， 每 隔 0.5 秒 就 会 调用 一 次 onRotateandaFire() 因 
数 。 在 onRotateAndFire() 子 数 中 ,首先 会 调用 this .findqNearestMonster () 国 数 找到 最 近 
的 怪物 ， 然 后 计算 出 当前 炮塔 和 怪物 的 距离 以 及 角度 等 ， 最 终 对 怪物 开火 ， 其 代码 如 下 : 


// 旋转 并 开火 
onRotateAndFire : function(){ 
Var nearestEnemy = this.findNearestMonster(); 
if (nearestEnemy != null)t{ 
this.weapon.stopAllActions(); 


this.fireTargetPos = nearestEnemy .getPosition(); 


O00 J O17 让 


Var rotateVector = cc.pSub (nearestEnemy .getPosition(), this. 
getPosition()); 

var rotateRadians = cc.pToAngle (rotateVector); 

// 弧度 转 为 角度 


Var rotateDegrees = cc.radiansToDegrees(-1 * rotateRadians); 


// speed 表 示 炮 塔 旋转 的 速度 ，0.5 / M_PI 其 实 就 是 1 / 2PI，, 它 表 示 1 秒 钟 旋转 1 个 辆 
Var speed = 0.5 / cc.PI; 
// rotateDuration 表 示 旋 转 特定 的 角度 需要 的 时 间 ， 计 算 它 用 弧度 乘 以 速度 


Var rotateDuration = Math.abs (rotateRadians * speed); 


oo ~ mm 居 wm 六 品 


VOD 


Var move = cc.rotateTo(rotateDuration, rotateDegrees); 
20 var callBack = cc.callFunc(this.onFire, this); 

21 var action = cc.sequence (move, callBack); 

22 this.weapon.runAction(action); 
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在 上 述 代码 中 ， 第 7 行 保存 了 下 一 颗 子 弹 要 发 射 到 的 最 终 位 置 。 

第 9 行 用 最 近 怪 物 的 坐标 减 去 当前 炮塔 的 坐标 ， 从 而 得 到 一 个 向 量 坐 标 。 然 后 在 第 10 行 中 ， 
将 rotateVector 问 量 坐标 转 为 弧度 ,这 个 弧度 再 通过 cc .radiansToDegrees (radqians) 国 数 
转 为 角度 ， 并 且 弧 度 需 要 乘 以 -1， 这 是 因为 Cocos 中 规定 顺 时 针 方 向 为 正 ， 而 在 数学 中 ， 顺 时 针 
为 负 ， 所 以 转化 的 时 候 需要 把 角度 a 变 为 -a。 

第 15 行 定义 了 炮 架 转动 的 速度 , 第 17 行 计算 出 了 炮 架 转向 到 最 近 的 怪物 所 需要 的 时 间 , 第 19 
行 到 第 22 行 构建 并 运行 了 一 个 组 合 动作 ， 从 而 实现 向 炮 架 开 火 。 

需要 注意 的 是 ， 第 20 行 中 的 onFire 函 数 。 在 该 函数 中 ， 会 创建 出 子弹 对 象 ， 每 颗 子 弹 会 运 
行 一 个 移动 到 终点 ， 然 后 调用 removeBullet () 函数 的 组 合 动 作 (代码 详 见 随 书 源码 )。 

removeBullet () 函数 用 来 移 除 当前 子弹 对 象 , 在 该 函数 内 部 ， 它 会 抛 出 一 个 移 除 子弹 的 事 
件 ， 并 把 子弹 自身 作为 事件 携带 对 象 一 并 抛 出 。 显 然 ， 这 个 事件 也 是 在 GPMainLayez. 
registerEvent () 图 数 中 注册 监听 。removeBullet () 函数 的 实现 代码 如 下 ;， 


1 removeBullet : function(sender)t{ 

2 Var event = new cc.EventCustom(jf.EventName .GP REMOVE BULLET); 
3 event .setUserDatal{ 

4 target : sender 

号 全 

6 cc.eventManager.dispatchEvent (event); 

2 


} 
此 时 再 运行 项 目 ， 然 后 在 地 图 中 创建 几 个 瓶子 炮塔 ,可 以 看 到 效果 如 图 17-27 所 示 。 


Es Sa 


Ps 
4 


4 


2 


De 


图 17-27 ”创建 炮塔 


虽然 炮塔 已 经 可 以 转动 并 发 射 子弹 , 但 是 子弹 打 中 怪物 之 后 , 怪物 并 不 会 死 ， 这 是 因为 我 还 
没有 做 子弹 和 怪物 之 间 的 碰撞 检测 。 


8. 子弹 和 怪物 的 碰撞 检测 
子弹 和 怪物 的 碰撞 检测 ,需要 在 GPMainLayer 中 开启 updaate 调 度 需 , 然后 在 cGPMainLayer . 
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update() 函数 中 调用 子弹 和 怪物 的 碰撞 检测 函数 checkcolliae ()。checkcolliae() 国 数 的 
逻辑 代码 如 下 : 


1 // 子弹 和 怪物 的 碰撞 检测 

2 checkCollide : function()t{ 

3 Var bullet = null; 

4 Var monster = null; 

S Var monsterRect = null; 

6 for (var x = 0; x < GameManager.currBulletPool.length; x++) { 

for (var y = 0; y < GameManager.currMonsterPool.length; y++) { 

8 for (var z = 0; Zz < GameManager.currMonsterPool[y|].length; z++) { 
9 


// 获取 子弹 


10 bullet = GameManager.currBulletPool[x]; 

Tl // 如 果 在 JSB 上 被 回收 ， 则 跳 过 

2 if (!cc.sys.isObjectValid(bullet)) { 

13 break; 

14 } 

1 monster = GameManager.currMonsterPool[y][z]; 

16 monsterRect = cc.rect (monster.x - monster.width / 2, monster.y - 
monster.height / 2, monster.width, monster.height); 

dy if (cc.rectContainsPoint (monsterRect, bullet.getPosition())) { 

18 // 移 除 子弹 

二 羡 this.removeBulletByIndex (x); 

20 // 移 除 怪物 

2 this.removeMonsterByIndex(y, 2); 

22 // 是 否 进入 下 一 组 

23 if (this.isNeedqLoadqNextGroup () ){ 

24 this.loadNextGroupMonster () ; 

25 }elsel{ 

26 if (GameManager.getGroup() > GameManager.getMaxGroup()) { 

这 学 Var event = new cc.EventCustom(jf.EventName.GP GAME 

OVER); 

28 event .setUserDatalt{ 

29 isWin : true 

30 es 

这 于 cc.eventManager.dispatchEvent (event ) : 

32 } 

33 } 

34 } 

35 } 

36 } 

37 } 

38 } 


可 以 看 到 ， 第 6 行 到 第 8 行 执行 了 一 个 3 层 foz 循 环 ， 其 实现 思路 是 取出 一 颗 子弹 ， 然 后 再 去 
遍历 GameManager .currMonsterPool 二 维 数 组 ， 因 为 这 个 二 维 数 组 中 存放 了 所 有 的 怪物 。 但 
是 ， 需 要 注意 的 是 子弹 的 获取 ， 并 不 是 在 第 一 层 for 循 环 中 ， 而 是 在 第 三 层 for 循 环 里 ( 具体 见 
第 10 行 )。 这 是 因为 如 果子 弹 和 怪物 磁 撞 了 ， 则 在 第 19 行 中 通过 调用 removeBulletByIndex 
(index) 函数 删除 子弹 ， 此 时 会 改变 GameManager.currBulletPoo1l 数 组 的 长 度 。 


另外 需要 注意 的 是 第 12 行 到 第 14 行 。 在 JSB 中 ， 如 果 当 前 子弹 已 经 被 移 除 ， 那 么 直接 跳 过 当 
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前 循环 。cc .sys.isobjectvalid(obj) 是 一 个 非常 好 用 的 函数 ， 它 用 来 在 JSB 中 检测 节点 的 有 
效 性 ， 从 而 避免 pnvalid Native Object 错误 。 
第 17 行 判断 了 子弹 是 否 碰撞 到 怪物 ， 如 果 磁 撞 到 了 ， 那 么 移 除 子弹 ( 见 第 19 行 )、 移 除 怪物 
( 见 第 21 行 )， 并 且 判 断 是 和 否 需要 进入 下 一 组 ， 如 果 需 要 ， 则 加 载 下 一 组 怪物 ， 如 果 不 需 要 ， 再 判 
断 是 否 是 最 后 一 组 怪物 , 如 果 是 , 则 表示 游戏 已 经 结束 。 游戏 结束 的 情况 有 两 种 一 一 成 功 和 失败 ， 
这 里 我 也 采用 抛 事件 的 方式 ， 抛 出 一 个 游戏 结束 事件 ， 并 在 事件 中 携带 着 游戏 输赢 的 状态 。 
游戏 结束 事件 的 回调 函数 为 GEMainLavyer .onGameover () ， 其 代码 如 下 : 


1 


I 


[事件 ] 游 戏 结 


onGameOver : function(event)t{ 


var data = event.getUserData(); 
GameManager.setIsWin(data.isWin); 
cc.audioEngine.stopMusic(); 


Var Scene = new GameResultScene(); 
cc.director.runScene (scene); 

var str = data.isWin ? "说 了 | " : " 输 了 "; 
cc.1og("GPMainLayer .onGameOver() : 游戏 结束 ， 你" + str); 


这 里 需要 注意 第 4 行 ， 它 将 游戏 胜利 或 者 失败 的 状态 保存 在 cameManager .iswin 属 性 中 ， 
然后 在 第 7 行 中 创建 了 游戏 结束 场景 ,并 在 第 8 行 做 了 场景 跳 转 。 需 要 说 明 的 是 , 游戏 结束 场景 中 
的 代码 ， 也 只 是 一 些 UI 的 组 合 ， 这 里 我 不 再 展开 讲解 ， 你 可 以 自行 查阅 随 书 代码 。 

最 后 ， 把 之 前 留 在 关卡 选择 场景 中 的 TODO 任 务 完成 ， 使 得 整个 游戏 Demo 完 整地 连接 在 一 
起 。 整 个 TODO 任 务 在 关卡 选择 页 面 背 景 层 的 cLBackgroundLayer.onLevelButtonEvent () 
函数 中 ， 其 代码 如 下 : 


1 
2 
3 
4 
3 
6 
7 
8 
9 


co OU 心口 


一 


// 事件 [关卡 按钮 ] 


onLevelButtonEvent : function(sendqer，type)1{ 


switch (type) { 
case ccui.Widget .TOUCH ENDED: 
var level = sender.getTag(); 7y 于 
// TODO : 加 载 关 卡 数 据 ， 进 入 游戏 
// 停止 音乐 
cc.audioEngine.stopMusic(); 
// 关卡 设置 
GameManager.setLevel (sender.getTag()); 
// 加 载 资 源 ， 并 进入 游戏 
cc.LoaderScene.preload(g gamePlay resources, function () { 
GameManager.loadLevelData (GameManager.getLevel ()); 
cc.director.runScene (new GamePlayscene()); 
}, this); 
break; 


和 等 级 


也 | 


NS 


至 此 ,《 保 卫 葛 卜 2》 项 目 实 战 的 Demo 开 发 完成 ， 此 时 再 运行 一 下 项 目 ， 进 入 到 游戏 玩法 
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场景 , 建立 儿 个 炮塔 , 成 功 击 退 了 所 有 的 怪物 之 后 , 便 可 以 看 到 游戏 结束 的 胜利 场景 如 图 17-28 
所 示 。 


【ET 
。 当前 关卡 3 额外 任务 。 


(及 成 功 建造 5 个 的 使 用 瓶子 炮 清除 1 个 红色 
交汇 子 炮塔 (顶级 ) 和 。 消灭 50 个 怪物 的 冰 根 道具 
人 本 Cr 

> 


图 17-28 ”游戏 胜 逢 
最 后 需要 说 明 的 是 ， 这 里 我 仅仅 演示 了 第 一 关 的 开发 ， 但 是 实际 上 , 在 随 书 源码 中 ,我 配置 
了 3 个 关卡 的 数据 ， 以 及 编辑 出 了 3 个 关卡 的 地 图 配置 。 
另外 ， 在 《保卫 莹 卜 2》 的 实际 项 目 中 ， 点 击 某 一 个 障碍 物 之 后 ， 最 近 的 炮塔 会 攻打 此 障碍 
物 ， 最 后 把 障碍 物 移 除 掉 ， 这 一 功能 留 作 本 书 唯一 的 作业 ， 如 果 你 能 在 基于 本 书 随 书 代码 完成 这 
一 功能 ， 那 么 你 便 完全 理解 Carrot 项 目的 代码 设计 了 。 


一 
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通过 本 章 的 学 习 ， 我们 完成 了 《保卫 萝卜 2》 项 目 Demo 的 开发 。 在 这 个 项 目 中 ,我 们 学 习 了 
关卡 数值 数据 应 该 写 在 一 个 单独 的 配置 文件 中 ,而 其 他 配置 (例如 障碍 物 等 关卡 配置 ) 可 以 通过 
Tiled Map Editor 编 辑 器 中 的 对 象 层 标记 。 每 一 个 关卡 的 数值 数据 可 以 放 在 GameManager 对 象 中 管 
理 , 然后 GameManager 只 提供 一 些 简单 的 接口 ， 保 证 游戏 结构 清晰 ， 数 据 不 会 混乱 。 男 外 ， 我们 
还 学 习 一 套 两 个 数组 配合 使 用 的 映射 标记 法 ， 即 一 个 二 维 数组 中 保存 区 域 位 置 , 男 一 个 二 维 数 组 
中 保存 男 一 个 数组 中 对 象 的 状态 信息 ， 这 在 游戏 开发 中 也 是 一 种 常用 的 方法 。 例 如 ,在 游戏 中 实 
现 擦 黑板 ， 擦 除 85% 面 积 以 上 ， 则 表示 擦 除 完毕 ， 便 可 以 通过 此 组 合 方式 来 实现 。 


欢迎 加 入 


图 灵 社 区 ITuring.cn 


最 前 沿 的 IT 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹豫 稍 律 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行 
动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 
DRM-free 的 阅读 体验 : 在 线 阅读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 
片 《 即 使 有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 

图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 
网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 
以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 往 翻译 版 技术 书 “ 出 版 即 过 时 ”的 缺 居 。 同 
时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 
书 出 版 的 质量 。 


优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 兑换 纸 质 样 书 。 


最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 
你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。( 收费 形式 须 经 过 
图 灵 社 区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 
这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 
你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 
翻译 工作 ， 是 需要 有 坚强 的 名 力 的 。 


最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 
员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 
你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 遍 取 积 分 和 银子 ， 积 累 个 人 声望 。 


关注 图 灵 教育 关注 图 灵 社区 
iTuring.cn 


线 出 版 电子 书 《 码 农 》 杂 志 图 灵 访 认 


名 


QQ 联系 我 们 


图 灵 读 者 官方 群 I[: 218139230 
图 灵 读 者 官方 群 [: 164939616 


微 博 联系 我 们 


官方 账号 : @ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 :，@ 图 灵 袁 野 

写作 本 版 书 : @ 图 灵 小 花 @ 图 灵 张 霞 @ 毛 倩 倩 -图 灵 
翻译 英文 书 ，@ 朱 齐 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 ，@ 图 灵 日 语 编辑 部 
翻译 韩文 书 ，@ 图 灵 陈 曦 
电子 书 合作 : @hi_jeanne 

图 灵 访 谈 /《 码 农 》 杂 志 : @ 刘 敏 ituring 
加 入 我 们 ，@ 王 子 是 好 人 
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微 信 联 系 我 们 


图 灵 访 谈 


turingbooks ituring_interview 


图 灵 社 区 : iTuring.cn 
热线 : (010)51095186 转 600 


人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 


从 建 风 的 教学 视频 就 开始 关注 他， 感谢 他 和 Cocos 一 起 成 
长 。 这 本 呕心沥血 之 作 涵 盖 面 广 ， 由 浅 入 深 ， 甚 至 用 商业 大 
作 《 保 卫 葛 卜 2 》 的 资源 来 元 教 于 乐 ， 从 各 个 方面 都 可 以 说 是 非 


panda ( 凌 华 彬 ) ，Cocos2d-JS 引 警 核心 开发 者 


Cocos 是 业内 领先 的 一 站 式 跨 平台 手 游 开 发 解决 方案 ， 市 面 上 已 经 有 大 量 的 教程 和 图 书 来 介绍 如 何 使 用 
Cocos， 但 是 这 些 书 和 教程 大 多 数 使 用 的 是 C++ 和 Lua， 鲜 有 比较 完整 且 深入 介绍 Cocos2d-JS 的 图 书 ， 本 书 弥 
补 了 这 方面 的 空白 。 建 风 耗 费 无 数 个 午夜 埋头 撰写 书稿 ， 在 初稿 完成 之 际 也 邀请 了 我 进行 技术 审 稿 ， 我 可 以 毫 不 
夸张 地 说 ， 这 绝对 是 一 本 良心 之 作 ， 推 荐 给 大 家 。 

一 一 子 龙山 人 ( 届 光 辉 ) ，Cocos2d-x 引 擎 核心 开发 者 


目前 市 面 上 使 用 C++、Lua 语 言 进行 Cocos 游 戏 开 发 的 教程 颇 多 ， 但 缺少 基于 JavaScript 来 开发 的 系统 教 
程 。 建 风 作 为 知名 Cocos 技 术 专家 ， 在 本 书 的 编写 上 花费 了 颇 多 精力 ， 今 得 知 本 书 横 空 出 世 ， 相 信 将 填补 这 部 分 
技术 教程 的 空白 。 随 着 手机 游戏 页 游 化 进程 的 推进 和 Cocos _ Creator 工具 的 推出 ， 基 于 JavaScript 的 开发 模式 将 
会 更 加 受 欢迎 。 本 书 内 容 丰 富 而 实用 ， 可 作为 广大 对 这 些 知识 感 兴趣 的 Cocos 爱 好 者 学 习 和 参考 之 用 。 

一 红 孩 儿 (证 安 ) 


学 习 要 学 以 致 用 ， 教 学 应 授 人 以 渔 。 建 风 将 其 恰到好处 地 融入 本 书 中 ， 在 详细 讲解 各 知识 点 的 同时 又 结合 项 
目 实例 的 引导 方式 ， 让 读者 更 透彻 地 理解 与 吸收 ! 这 着 实 是 一 本 良心 之 作 ， 值 得 大 家 入 手 。 
一 一 Himi ( 李 华 明 ) 


建 风 是 触 控 科 技 认证 CVP， 是 CVP 平 台 年 轻 有 为 的 Cocos2d-JS 体 系 专家 ， 对 Cocos2d-JS 引 擎 理解 深 

刻 ， 开 发 经 验 丰富 ， 且 先后 在 CocoaChina 社 区 和 CVP 平 台 上 发 布 两 套 Cocos2d-JS 视 频 教 程 ， 均 获得 超 高 好 

评 。 本 书 内 容 全 面 、 重 点 突出 ， 不 仅 是 初级 开发 者 的 入 门 教程 ， 也 可 以 帮助 更 多 游戏 开发 者 全 面 掌握 引 敬 和 游戏 
开发 技巧 。 社 区 和 平台 对 这 本 书 也 非常 期 待 ， 并 会 昂 力 支持 和 推广 ! 

一 一 CocoaChina 社 区 和 CVP 平 台 


手机 游戏 发 展 至 今 ， 产 品 层出不穷 ， 而 这 其 中 不 乏 优 秀 的 游戏 产品 脱颖而出 ， 每 一 款 产 品 都 是 游戏 开发 人 员 
辛勤 汗水 的 浇筑 ， 技 术 是 构建 游戏 的 基本 环节 ， 本 书 正 是 建 风 在 实际 开发 工作 中 的 经 验 累积 。 如 今 建 风 将 这 些 经 
验 豪 无 保留 地 分 享 给 大 家 ， 可 以 帮助 大 家 了 解 更 多 的 游戏 开发 经 验 和 技巧 ， 如 果 你 对 Cocos2d-JS 游 戏 开 发 有 兴 
趣 ， 那 么 请 不 要 错过 这 本 好 书 ! 


一 一 林 德 辉 ，GameRes 游 资 网 CEO 


ISBN 978-7-115-42148-7 
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ISBN 978-7-115-42148-7 
Z 米 el A > 、 


看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


